できない.dev

Sass で「@import rules are deprecated」の警告が消せない(@use への移行)

@import rules are deprecated の警告は、sass-migrator で @use / @forward に書き換えれば消える。
Dart Sass 1.80.0 で非推奨になり、3.0.0 で削除される予定だ。

公開:

要約

@import を含む .scss をコンパイルすると、ビルドは成功するのに次の警告が出る。

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
More info and automated migrator: https://sass-lang.com/d/import

色を付けずに出力する環境では DEPRECATION WARNING [import]: と大文字で表示される。公式の説明(新しいタブで開く)のとおり、@import は Dart Sass 1.80.0 で非推奨になり、早くても 1.80.0 の 2 年後に出る 3.0.0 で削除される予定だ。
警告を止めるだけでは削除に間に合わないので、@use / @forward へ書き換える。

解決策

1. sass-migrator で @use に書き換える

npx sass-migrator module --migrate-deps src/styles/main.scss

--migrate-deps を付けると、指定したエントリーから読み込まれるファイルもまとめて書き換える。--dry-run --verbose を付ければ、ファイルを変えずに書き換え後の内容だけを表示できる。
次の main.scss は、

@import "vars";
 
.btn {
  color: $primary;
  width: percentage(0.5);
}

次のように変換される。
組み込み関数も sass:math モジュールの呼び出しに置き換わる。

@use "sass:math";
@use "vars";
 
.btn {
  color: vars.$primary;
  width: math.percentage(0.5);
}

2. 手で書き換えるときは名前空間を付ける

名前空間の既定は、@use に書いた URL の最後の部分(@use "styles/vars" なら vars)になる。
自分で書いたファイルなら、as * で名前空間なしにもできる。

@use "vars" as *;
 
.btn {
  color: $primary;
}

@use は @forward 以外のすべての規則より前に書く。
Vite の additionalData も '@use "/src/vars" as *;\n' のように @use に置き換える。

3. 依存ライブラリ由来の警告は分けて扱う

sass --quiet-deps --load-path=node_modules src/main.scss dist/main.css

--quiet-deps は、ロードパス経由で読み込んだファイルから出る非推奨の警告を表示しない。
JS API では quietDeps: true を渡す。

4. 移行までの間だけ止める

sass --silence-deprecation=import src/main.scss dist/main.css

JS API では silenceDeprecations: ["import"] を渡す。
コマンドラインの --silence-deprecation は Dart Sass 1.74.0 以降で使える。
警告を消しても削除の予定は変わらないので、移行が済むまでのつなぎにとどめる。

よくある原因

  1. @import が残っている: 自分の .scss だけでなく、Vite の css.preprocessorOptions.scss.additionalData で @import "/src/vars"; のように全ファイルへ差し込んでいる場合も同じ警告が出る。
  2. 名前空間を付けずに参照している: @use で読み込んだメンバーには名前空間が付くので、@import のときと同じく $primary と書くと Error: Undefined variable. でビルドが止まる。
  3. グローバルの組み込み関数: percentage() や map-get() のように名前空間なしで呼ぶ組み込み関数も、@import と同時に非推奨になった。
    こちらは [global-builtin] の警告として出る。
  4. 依存ライブラリの @import: node_modules の Sass ライブラリが内部で @import を使っていると、自分のファイルを直しても警告が残る。

この手順で直った?