Sass

Next.js は、パッケージのインストール後に ` .scss` と ` .sass` の両方の拡張子を使用して Sass と統合するための組み込みサポートを提供しています。CSS モジュールと ` .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 モジュールファイルからエクスポートされた Sass 変数をサポートしています。

たとえば、エクスポートされた ` primaryColor` Sass 変数を使用します。

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

import variables from '../styles/variables.module.scss'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}