Sass

Next.js は .scss および .sass 拡張子を使用して Sass を統合するための組み込みサポートを提供しています（パッケージインストール後）。CSS Modules と .module.scss または .module.sass 拡張子を使用してコンポーネントレベルの Sass を利用できます。

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

npm install --save-dev sass

知っておくと便利:

Sass は2つの異なる構文をサポートしており、それぞれ独自の拡張子を持っています。 .scss 拡張子は SCSS 構文の使用を必要とし、 .sass 拡張子は インデント構文（"Sass"）の使用を必要とします。

どちらを選べばよいかわからない場合は、CSS の上位セットであり、インデント構文（"Sass"）を学ぶ必要がない .scss 拡張子から始めてください。

Sass オプションのカスタマイズ

Sass コンパイラを設定したい場合は、next.config.js で sassOptions を使用します。

const path = require('path')

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

Sass 変数

Next.js は CSS Module ファイルからエクスポートされた Sass 変数をサポートしています。

例えば、エクスポートされた primaryColor Sass 変数を使用する場合:

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// ルート `/` URL にマッピング

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

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