🤧
【Sass】dart-sass対応 @importの廃止に伴い@useに変更のためのマイグレーションで楽々
なんで変更する必要がある？
Sass公式によると、@importは2021年10月1日に非推奨、遅くとも2022年10月1日に@importのほとんどのグローバル関数のサポートが終了になります。
参照：Sass公式サイト
コマンドでマイグレーションを実行
公式：https://sass-lang.com/documentation/cli/migrator
一括マイグレートできるコマンドが用意されています
(npx) sass-migrator --migrate-deps module <entrypoint.scss...>
モード：
module
今のPJは endpoint.scss で @import で一括ロードのため、moduleで一括変更が可能になります。
使うオプション：
--migrate-deps
このオプション（略 -d）は、マイグレーターに対して、コマンドラインで明示的に渡されたstyle sheet だけでなく、@useルール、@forwardルール、または@importルールを使用して依存するスタイルシートも変更するよう指示します。
(移行済みのものは何も影響がない。つまり、@useと@forward がすでに使われたら、何も変更がない)
コマンド実行後の 手作業：
@extend で使われる別ファイルの CSSモジュールを @use を足します。
変更後の影響
@use で使いたい変数 、class、mixin を読み込む
$font-sizeや$mixin など、元々グローバルに定義されていた変数やミックスインを使用する場合は、当該のscssファイルで「@use」を使って明示的に読み込む必要があります。
@use '../../foundation/variable' as *; // 今のファイルに名前空間内に使える
@use '../../foundation/mixin';
.p-new {
@extend %base-frame--with-inner; // mixin中に定義した変数
background: $content-bg-color; // variable.scss中に定義した変数
border: 1px solid $border-color;
font-size: 0;
letter-spacing: 0;
> input {
@include mixin.place-holder-color($form-placeholder-color); // mixin名前空間から指定
&:focus {
background-color: $accent-color11;
border-color: $primary-color;
}
}
}
ps:<namespace>.<variable> も検討しました。
もちろん可能です。デメリットとしては変更行数が 2500+ 、これからのcss実装にあたって、書くときのスイチングコストがあります。
元からグローバルで一番使われる css 変数は as * で今まで通りに使われるのがいいと思います。
Discussion