sass-migrator で @import を dart-sass の @use へ自動変換

非推奨になった node-sass から dart-sass へコンバージョンしてくれる便利ツール。
@import を @use へ変換するのは骨が折れるはずなので助かる。

(参考) sass-migratorを活用して、node-sassをdart-sassへらくらく変換!!

主な機能

• @import を @use へ自動的に変換してくれる
• @import で読み込まれているファイルまで全部変換してくれる
• / での除算を math.div() に変換してくれる

インストール

npm install -D sass-migrator

オプション等

module ... @import --> @use に変換する(スコープ名も付与してくれる)
division ... / での除算を math.div() に変換
--migrate-deps ... @use、@forward、@import で読み込まれている先のファイルも変換

実行

事前に変換元ファイル群のバックアップをとっておくと何かあっても安心。

今回は --migrate-deps module division の3つを指定した。
基本的にこの3オプションでほとんどのケースに対応できるんじゃないだろうか。

# テストのみ
* npx sass-migrator --migrate-deps module division --dry-run ./style.scss

# 本番実行
npx sass-migrator --migrate-deps module division ./editor-style.scss

注意1

一部、変数を含む場合に自動変換がエラーになる。

(style.scss) @import "variables/index"
↓
(variables/_index.scss) @import "typography"
↓
(variables/_typography.scss) $font__main: sans-serif;

のように、@import 先でさらに @import で読み込まれている場合、最後のファイル _typography.scss に宣言された変数において、自動変換時に「変数が存在しない」的なエラーを吐いたので、style.scss のここだけ手動で @import "variables/typography" と書き換えて対処。
無理やりだが、この感じで @import が1回になるようにしたら(変数に関しては) sass-migrator の自動変換が通った。

注意2

残念ながら bootstrap は dart-sass に未対応。
ならば試しにと node_modules 内の既存の bootstrap の scss を自動変換しようとしたがエラーを吐いた。
早く dart-sass に対応して欲しいところ。

#sass