︙

Sass

Next.js は、パッケージが.scssおよび.sass拡張子を使用してインストールされた後、Sass との統合を内蔵サポートしています。 CSS Modules や.module.scss、.module.sass拡張子を通じて Component レベルの Sass を使用することができます。

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

Terminal

npm install --save-dev sass

Good to know:

Sass は2 つの異なる構文をサポートしており、それぞれが独自の拡張子を持っています。 .scss拡張子は、SCSS syntax を使用することを必要とします。 .sass 拡弽子を使用する場合は、インデントされた Syntax ("Sass") を使用する必要があります。

どれを選ぶべきかわからない場合は、 start を .scss 拡張子で始めてみてください。これは CSS のスーパーセットで、 require があなたにそれを学ぶことを必要としませんインデントされた Syntax ("Sass")。

SassOptions のカスタマイズ

Sass compiler を設定したい場合は、next.config.jsのsassOptionsを使用してください。

next.config.js

const path = require('path')

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

Sass 変数

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

たとえば、export された primaryColor Sass の variable を使用すると：

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>
  )
}