Menu

Next.jsでSassを使用する方法

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

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

Terminal
npm install --save-dev sass

補足:

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

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

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

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

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

実装

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

next.config.ts
TypeScript
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>
  )
}