Bootstrap 5 の変数やマップを上書きする

2022-02-06T21:41:13+09:00

Bootstrap 5 が去年5月にリリースされてからかなり経ってしまいましたが、 4 とは変数の上書きや追加の方法が変わっていると知ったので実験をしてみました。

検証結果

ページ: Black in me - Black! - Blackout
リポジトリ: GitHub - arm-band\/test_bootstrap5_blackout: Bootstrap5 の変数を上書きできるかテスト。

コード

ディレクトリ (関連する部分のみ)

   /
  └ src/
    └ scss/
       └ foundation/
            ├ bootstrap/
            │    └ _import.scss
            │
            ├ _append.scss
            ├ _index.scss
            ├ _mixin.scss
            └ _variables.scss

ひとまずこんな形に。今回はデモ用なので globalディレクトリを用意しませんでしたが、実際には globalディレクトリで運用しようかな、と思います。

src/scss/foundation/bootstrap/_import.scss

@charset "utf-8";

// color custom (override)
@import "../variables";

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";

// color custom (add to map)
@import "../append";

// Layout & components
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
// 略

元々の Bootstrap 5 の bootstrap/scss/bootstrap.scss のパスを調整したコピーを用意。

このコピーに2箇所手を加えます。

Configuration の読み込みの前に src/scss/foundation/_variables.scss を読み込む
Configuration の読み込みの後に src/scss/foundation/_append.scss を読み込む

src/scss/foundation/_index.scss

@charset "utf-8";

//@forward "variables";
@forward "bootstrap/import";
@forward "mixin";

元々同じディレクトリにあった _variable.scss の読み込みを削除。これは先の src/scss/foundation/bootstrap/_import.scss で _variable.scss を読み込んでいるためです。

src/scss/foundation/_variables.scss (既存変数の上書き)

@charset "utf-8";

@use "sass:color";

$m-color: #333;
$m-main-color: #666;
$m-main-color_d: color.scale($m-main-color, $lightness: -8%);
$m-main-color_l: color.scale($m-main-color, $lightness: 8%);
$m-accent-color: color.adjust($m-main-color, $hue: 150deg);
$m-link-color: color.adjust($m-main-color, $hue: 210deg);
$m-link-v-color: color.scale($m-link-color, $lightness: -8%);
$m-link-ha-color: color.scale($m-link-color, $lightness: 8%);
$m-bg-color: #fff;

// override
$primary:       $m-main-color;
$secondary:     $m-bg-color;

変数宣言。前半は自分用の変数なのでお好みで。ただし $link-color 等は Bootstrap 側の変数とバッティングするのでそういった変数名は避けます。

その上で、今回は最後の部分に Bootstrap5 の変数の値を上書きするための $primary や $secondary を用意。このように Bootstrap 5 の変数より前に定義することで既存変数の上書きができます。

src/scss/foundation/_append.scss

@charset "utf-8";

$custom-colors: (
  "blackout": #000
);

// blackout をマップ $theme-colors に追加
$theme-colors: map-merge($theme-colors, $custom-colors);

一方、マップ $theme-colors に新たな要素を追加するためには先程の変数上書きとは異なり、 Bootstrap 5 の変数等の後でマップに追加する必要があります。

……確かに map-merge で合体するマップを指定する都合上、予め指定するマップが存在していなければならないですよね。

これで既存のマップ $theme-colors に要素 blackout を追加できました。

結果

Bootstrap のボタンで検証。左から2つの primary と secondary は上書きしたのでカスタマイズした色に、3つ目はオリジナルの blackout です。4つ目以降はデフォルトの success や info 等が続いており、上述のようにマップに一部の色のみを指定して map-merge しても他の色が影響を受けていないことを確認しました。

これで大丈夫そうですね。

「Bootstrap5」の記事 - Crieit