GulpでSCSSをコンパイルしていると、ある日突然ビルドが異常に遅くなった…そんな経験はありませんか？
私自身、たった数行の変数ファイルを@useで読み込んだだけなのに、Sassのビルドに時間がかかるようになってしまいました。
本記事では、その原因と、as *を使ったシンプルな解決方法について紹介します。
@useで重くなった具体例
// variables.scss
$accent-primary: #02A1CD;
$accent-secondary: #E46C56;
$text-color: #2D323E;
// style.scss
@use './variables';
body {
color: variables.$text-color;
}
このように、名前空間付きで変数を参照していると、内部的な依存関係の解析が複雑化し、コンパイルに時間がかかることがあります。
解決策：@useにas *を付ける
@useにas *を追加することで、変数をグローバルのように扱うことができ、ビルド時間が大幅に短縮されます。
@use './variables' as *;
body {
color: $text-color;
}
この方法に変更しただけで、私の環境では体感的にビルド時間が10分の1以下に短縮されました。
注意点
- 複数のファイルで同じ変数名を使っていると、予期せぬ上書きが発生する可能性があります。
- 名前空間がなくなるため、変数の出所が分かりにくくなることがあります。
安全に使うためのポイント
- 変数専用のファイルに限定して
as *を使用する - 変数名に接頭辞を付けて、衝突を避ける（例：
$color-primary） - ミックスインや関数は名前空間をつけて明示的に管理する
まとめ
@useはSassのモジュール管理に便利な仕組みですが、構文によっては思わぬパフォーマンス低下を招くことがあります。
もしSassのコンパイルが遅くなったと感じたら、@use './variables' as * をぜひ試してみてください。手軽に改善できる可能性があります。
