More than 3 years have passed since last update.

Next.js の CSS Modules で変数などの共通で読み込みたいファイルの読み込み処理を共通化する方法

Posted at 2021-12-03

Next.jsでCSS Modules（SCSS）などを使っている時などに、メディアクエリーや共通の変数を定義したファイルを新しくscssファイルつくるたびに読み込まなくてはならないのは地味にめんどくさいです。

next.config.jsのsass optionsに設定を記入することで共通scssファイルの読み込み処理を自動化できます。

next.config.js

module.exports = {
  ‥‥‥‥‥‥‥‥‥‥‥‥
  sassOptions: {
    prependData: `
    @use '@variables' as *;
    `,
  },
  ‥‥‥‥‥‥‥‥
};

これでscssファイルの冒頭に自動で @use '@variables' as *; 文(tsConfigで@variablesのaliasを設定している)が挿入されてくれます。便利です。