SCSSの基本を学んだうえで、実際にBootstrapをメンテナンス性を保ちつつカスタマイズする方法をまとめておく。
既存のSCSSは触らない
1つ目のポイントは、Bootstrapを構成するSCSSには手を入れないこと。直接いじってしまうと、Bootstrapのアップデートがかかった場合に上書きアップデートができなくなってしまう。
特に現行のバージョン5はリリースされてまだ日が浅いのでアップデートの可能性が高い。アップデートの恩恵を得るためには別の方法でカスタマイズする必要がある。
カスタム用のSCSSを作る
Bootstrapは大量の変数がすでに設定されており、基本的にはそこに変更を加えることでCSS全体に効果を及ぼすことができる。
カスタムする場合は、公式にもある下のやり方を使う。
Bootstrap の全ての Sass 変数は
https://getbootstrap.jp/docs/5.0/customize/sass/#%E5%A4%89%E6%95%B0%E3%81%AE%E5%88%9D%E6%9C%9F%E5%80%A4!defaultフラグを持っており、Bootstrap のソースコードを編集すること無く初期値を変更することができます。必要な場合は、変数をコピー & ペーストし、その値を編集して!defaultフラグを削除します。すでに変数に値が代入されている場合は、初期値による再代入は行われません。
例えばBodyの背景色を設定する変数をカスタムする場合は
$body-bg: $white !default;
↓
$body-bg: gray; // 変更を加えたうえで、!defaultは削除するこのようにする。Sassファイルは別に作成し、下記の注意がある。
同じ Sass ファイル内で変数の上書きをしたい場合は、デフォルトの変数の前か後のどちらでも書くことができます。しかし、複数の Sass ファイル間の場合は、Bootstrap の Sass ファイルをインポートされる前に上書きする必要があります。
https://getbootstrap.jp/docs/5.0/customize/sass/#%E5%A4%89%E6%95%B0%E3%81%AE%E5%88%9D%E6%9C%9F%E5%80%A4
例えば下記のようなカスタム用SCSSのstyle.scssを作成する。ファイルの構成はbootstrap.scssと同じ階層にstyle.scssがあるとする。
インポートするのはマニュアルに指摘があるように一番最後にする。
$body-bg: gray; // 変更した変数の値
// Bootstrap and its default variables
@import "bootstrap"; // bootstrap.scssのパスを指定する。拡張子（SCSS）は不要これをコンパイルすると、変数に上書きがかかったstyle.cssが生成される。あとはこれをhtml側で読み込めばOK。
