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

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

そこで、next.config.jsのsassOptionsを使うことで全ての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