SCSSの@importは廃止の問題！@useへの乗り換えについて

SCSSの@importルールが2022年10月頃に廃止予定のようです。

この@importは別sassファイルを読み込む便利なルールため、色んな所で使っていると思います。
廃止されるため@importの代わりに@useを使う必要があります。
@useはカプセル化されているため使う場合はどのファイルから読み込むか指定する（名前空間をつけて呼び出す）必要があります。
今までのようにファイルを読み込むだけでは変数やmixinなどは使えません。
書き変え方は下記のイメージです。
@import を使った場合
@import "base/variable";
@import "module/mixin";

.item {
  color: $baseFontColor;
  @include border;
}

@use を使った場合

@use "base/variable";
@use "module/mixin";

.item {
  color: variable.$baseFontColor;
  @include mixin.border;
}

おおまかな書き換えのイメージは下記になります。

１．@importを@useに書き換えます。

２．読み込んだファイルの使用したい変数やmixinは [ファイル名].[変数名] のように書きます。

@useを使うメリットの一つとして「２つのファイルを読み込んで、同じ変数名だった場合、それぞれ別の変数として使える」というのもあります。

現状@import を使っているところを書き換えるのはなかなか大変だとおもうのですが、@useを使うメリットも色々あるので少しずつ慣れていければと思っています。

コメント