Sassの使用方法

Next.jsは、.scssと.sassの両方の拡張子を使用してSassを統合するための組み込みサポートを提供しています。CSSモジュールと.module.scssまたは.module.sass拡張子を使用して、コンポーネントレベルのSassを利用できます。

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

Terminal

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

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

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

module.exports = nextConfig

実装の指定

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

import type { NextConfig } from 'next'

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

export default nextConfig

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

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

module.exports = nextConfig

Sass変数

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

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

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変数

On this page