Dart-Sassの@import廃止対応で詰まったこと

Dart-Sassの@importルール廃止

ソース

https://sass-lang.com/documentation/at-rules/import

廃止に至った問題（Google翻訳）

• @importは、すべての変数、ミックスイン、および関数にグローバルにアクセスできるようにします。 これにより、人々（またはツール）がどこで定義されているかを判断することが非常に困難になります。
• すべてがグローバルであるため、名前の衝突を避けるために、ライブラリはすべてのメンバーのプレフィックスを付ける必要があります。
• @extendルールもグローバルであるため、どのスタイルルールが拡張されるかを予測することは困難です。
• 各スタイルシートが実行され、@ importedされるたびにCSSが発行されます。これにより、コンパイル時間が長くなり、出力が肥大化します。
• ダウンストリームスタイルシートにアクセスできないプライベートメンバーまたはプレースホルダーセレクターを定義する方法はありませんでした。

まあ要するに@importすればごそっとどこでも使えるってのは良くないよねってこと。

オブジェクト指向的な要素を感じる。

@importから@useへの置き換え

@importは2022年頃廃止予定なので、それまで新しい置き換えルールとして@useを使う。

https://sass-lang.com/documentation/at-rules/use

基本は@useに置き換えるだけでいいが、CSSの変数を使う場合はちょっと書き方が変わる。

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

呼び出すファイルが一つのクラスだとして、@useでオブジェクト生成、プロパティやメソッドを使うような感覚。

筆者が詰まった点

使用技術: Vue2、ElementUI、Dart-Sass

コンポーネントライブラリのnpmに食わせるCSS変数の格納ファイルだけ@use効かなかった。

なぜかというのは上記の@useルールの通り。

実際に定義した変数を使っているのはnodeモジュールの中なので、こちらで”オブジェクト.変数”みたいなことしてあげないとダメだった。

また辛いことに3年前から更新されていないコンポーネントライブラリだったので、ベンダが@use対応してくれるのは絶望的。

なので解決法は2つある。

• folkでnpmを自分用にいじったものを使う
• @use対応しているコンポーネントライブラリへ切り替える

結構しんどいが、@use対応しているコンポーネントライブラリへ切り替えることにした。（npmいじるとアップデートできないし、今後の不具合にもなりそうな予感がするため）まだ着手できていないし、どのコンポーネントライブラリが対応しているかわからないが、まずVue2を3にするところから始めないといけない気がする。

CSSのurl関数が使えない

//エラーになる。"as　hoge"みたいなこともできない
@import "http://fonts.googleapis.com/css?family=Droid+Sans";

これちょっとソースが見つからなかったので原因がわからないけど、@useの仕様から察するにできないんだろうなあと自分の中で納得している。（ご存知の方がいらっしゃれば共有いただきたい）
こういうのは引き続き@import使っていかないとダメっぽい。

おわりに

雑だが、Sassのルール変更に結構頭を悩ませ、時間を費やしてしまったということである。
フロントエンドは本当に技術のアップデートが激しいので、おちおちしていると本当に置いていかれそうだ。