【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
移行前
ドキュメントに従って、変数の初期値を上書きしています。
/* 変数の上書き */
$primary: #0000ff;
$secondary: #696969;
/* Bootstrap */
@import "../node_modules/bootstrap/scss/bootstrap";
移行後
@import
から @use
へ変更しただけです。
これだと 変数が上書きされません。
/* 変数の上書き */
$primary: #0000ff;
$secondary: #696969;
/* Bootstrap */
@use "../node_modules/bootstrap/scss/bootstrap";
解決方法
@use
ルールは、メンバー(変数やMixins、関数)をカプセル化するため、変数はグローバルに適用されなくなるようです。
変数を外部から変更する場合は、with節 を使います。
@use "../node_modules/bootstrap/scss/bootstrap" with (
/* 変数の上書き */
$primary: #0000ff,
$secondary: #696969,
);
参考
Author And Source
この問題について(【Dart Sass】@use使用でBootstrapの変数を上書きする), 我々は、より多くの情報をここで見つけました https://qiita.com/chocobi/items/3d372dbfd51dffb83cb7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .