Sass

Next.jsは.scssと.sass拡張子の両方を使用したSassの組み込みサポートを提供しています。CSS Modulesと.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.jsでsassOptionsを使用します。

next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass変数

Next.jsはCSS Moduleファイルからエクスポートされた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>
  )
}

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

Sass変数

On this page