Sass

Next.jsは、パッケージがインストールされた後、.scssと.sassの両方の拡張子を使用してSassと統合するための組み込みサポートを提供します。CSS Modulesを介してコンポーネントレベルのSassを使用でき、その際には.module.scssまたは.module.sass拡張子を使用します。

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

ターミナル

npm install --save-dev sass

知っておくと良いこと:

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

どちらを選べばよいかわからない場合は、CSSのスーパーセットであり、インデント構文（「Sass」）を学ぶ必要がない.scss拡張子から始めることをお勧めします。

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

Sassオプションを設定したい場合は、next.configでsassOptionsを使用してください。

next.config.ts

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

実装

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

next.config.ts

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

Sass変数

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

例えば、エクスポートされたprimaryColor Sass変数の使用

app/variables.module.scss

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

pages/_app.js

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

お役に立ちましたか？