CSS Modules + Sass（SCSS） で発生した変数に関する Stylelint エラーとその解決方法

はじめに

CSS Modules と Sass(SCSS) を組み合わせてスタイルを実装した際に直面した問題を紹介します。

今回は、名前空間なしでインポートしたパーシャルファイル内の変数を使用して、ショートハンドプロパティを指定した際に発生したエラーの解決方法を取り扱います。

環境

Next.js: v14.2.3
Sass: v1.77.2
stylelint: v16.2.1

問題の概要

1. Sass（SCSS）のパーシャルファイルを作成し、変数 $red を定義

// _variables.scss
$red: #db4343

2. パーシャルファイルを名前空間なしでインポートし、$redをborderに指定

// styles.module.scss
@use '/variables' as *;

.style {
  border: 2px solid $red;
}

3. Stylelintからエラーメッセージが出力

Cannot parse property value "2px solid $red" for property "border" \
(declaration-property-value-no-unknown) 

このエラーは、Sassの変数がborderのプロパティ値として解釈されなかったことを示しています。

解決方法

今回、Sassのインターポレーションを使うことによって解決しました。
ショートハンドプロパティ内で変数を使用する場合、インターポレーションを使わなければ正しく解釈されません。
以下のように、変数を#{$変数}で囲ってあげることで、Stylelintのエラーは解消します。

// styles.module.scss
@use '/variables' as *;

border: 2px solid #{$red};

補足

名前空間ありでインポートすれば、インターポレーションを使わずともエラー解消できます。
ただ、今回は名前空間なしで実装したかったため、採用しませんでした。
以下、名前空間ありでインポートした際の実装です。

// styles.module.scss
@use '/variables' as color;

.style {
  border: 2px solid color.$red;
}

参考文献