2001Yのプロフォール画像

2001Y@Y20010920T

Next.jsにはCSS ModulesやSASSなどのCSSを便利に使う方法がビルドインされているが、ブランドカラーなど複数ファイルにまたがって同じ変数を使いたいことも多い。

global.cssに純正CSS変数を定義すればレンダリングには問題がないが、SASS変数などを使いたい場合は同ファイル内に変数が定義されていないとコンパイルエラーを起こしてしまう。

そこで、next.config.jssassOptionsを使うことで全てのSASSをコンパイル前に変数を定義したSASSを@importさせることができる。

module.exports = {
  sassOptions: {
    prependData: '@import "styles/variable.scss";'
  },
};

source: https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options