Sass

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

まず、sassをインストールします：

Terminal

npm install --save-dev sass

Good to know:

Sassは、それぞれ独自の拡張子を持つ二つの異なる構文をサポートしています。 .scss拡張子はSCSS構文の使用を要求します。一方、.sass拡張子はインデント構文 ("Sass")の使用を要求します。

どちらを選ぶべきかわからない場合は、CSSのスーパーセットであり、インデント構文("Sass")を学ぶ必要のない.scss拡張子から始めてください。

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

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

実装

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

Sass変数

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

たとえば、エクスポートされたprimaryColorSass変数を使用します：

app/variables.module.scss
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

app/page.js
// ルート `/` URLにマップされます

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

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

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

実装​

Sass変数​

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

実装

Sass変数