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モジュールファイルからエクスポートされた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>
}

役に立ちましたか？