bootstrapを使用しているプロジェクトで @import を @use へ書き換えました。
その際、bootstrapの変数を上書きする部分（テーマカラーの変更など）でハマったので、解決方法を残しておきます。
前提
Sassでファイルを呼び出す際に使っている @import が廃止される予定でして、代わりに @use @fowerdを使うように推奨されています。
（※ Google日本語翻訳）
Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。
この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に廃止します。これには、すべての実装のメジャーバージョンリリースが含まれます。
https://sass-lang.com/blog/the-module-system-is-launched#future-plans
バージョン
sass 1.44.0
bootstrap 5.1.3
構造
project/
├── scss/
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
移行前
ドキュメントに従って、変数の初期値を上書きしています。
custom.scss
/* 変数の上書き */
$primary: #0000ff;
$secondary: #696969;
/* Bootstrap */
@import "../node_modules/bootstrap/scss/bootstrap";
移行後
@import から @use へ変更しただけです。
これだと 変数が上書きされません。
custom.scss
/* 変数の上書き */
$primary: #0000ff;
$secondary: #696969;
/* Bootstrap */
@use "../node_modules/bootstrap/scss/bootstrap";
解決方法
@use ルールは、メンバー（変数やMixins、関数）をカプセル化するため、変数はグローバルに適用されなくなるようです。
変数を外部から変更する場合は、with節 を使います。
custom.scss
@use "../node_modules/bootstrap/scss/bootstrap" with (
/* 変数の上書き */
$primary: #0000ff,
$secondary: #696969,
);
参考
Sassを@importから@useに置き換えるための手引き | Web Design KOJIKA17
↧