︙

Sass

Next.js は、パッケージが.scssおよび.sass拡張子を使用してインストールされた後、Sass との統合を内蔵サポートしています。 CSS Modules や.module.scss、.module.sass拡張子を通じて Component レベルの Sass を使用することができます。

まず、sass をインストールしてください：

Terminal

npm install --save-dev sass

Good to know:

Sass は2 つの異なる構文をサポートしており、それぞれが独自の拡張子を持っています。 .scss拡張子は、SCSS syntax を使用することを必要とします。 .sass 拡弽子を使用する場合は、インデントされた Syntax ("Sass") を使用する必要があります。

どれを選ぶべきかわからない場合は、 start を .scss 拡張子で始めてみてください。これは CSS のスーパーセットで、 require があなたにそれを学ぶことを必要としませんインデントされた Syntax ("Sass")。

SassOptions のカスタマイズ

Sass compiler を設定したい場合は、next.config.jsのsassOptionsを使用してください。

next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass 変数

Next.js は、CSS モジュールファイルから export された Sass 変数をサポートします。

たとえば、export された primaryColor Sass の variable を使用すると：

app/variables.module.scss

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

app/page.js

// maps to root `/` URL

import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}