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` で `sassOptions` を使用してください。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

実装

`implementation` プロパティを使用して、使用するSassの実装を指定できます。デフォルトでは、Next.jsは`sass` パッケージを使用します。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}
 
export default nextConfig

Sass 変数

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

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

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

// maps to root `/` URL
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}