【Dart Sass】@use使用でBootstrapの変数を上書きする


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,
);

参考