3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

参考

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?