概要
Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。
Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。
また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。
とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。
下ごしらえ
まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。
中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。
@import "path/to/bootstrap/scss/bootstrap";
npmで入れた場合は ../node_modules/bootstrap/scss/bootstrap などになる。
これだけで、コンパイルするとデフォルトのbootstrap.cssと同等のcustom.cssが作成されるので、bootstrap.cssをcustom.cssで置き換えることができる。
まずこれで、Bootstrap自体をコンパイルする必要がなくなり、bootstrap.cssをわざわざ自分のプロジェクトにコピーする必要もなくなる。
スタイルのカスタマイズ
custom.scss内で変更したい変数に値を設定する。
ここで注意すべきなのは、Bootstrapの@importよりも前に記述すること。
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "path/to/bootstrap/scss/bootstrap";
Bootstrapのデフォルトを上書きするものなので、変数への代入に!defaultはいらない。
変更できる変数はpath/to/bootstrap/scss/_variables.scss を参照のこと。
軽量化
せっかくBootstrapをカスタマイズするならば、スタイルの変更だけでなく、いらない機能を削除して軽量化もしたい。
上では@import "path/to/bootstrap/scss/bootstrap";でBootstrapのすべてのソースを読み込んでいたが、scss/bootstrap.scssの中身を見てみると、機能ごとのscssファイルをimportしているのがわかる。
custom.scssの@import "path/to/bootstrap/scss/bootstrap";をこれらのimport文にごっそり置き換えて、不要なファイルのimportを削除すればよい。
例：
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
//@import "../node_modules/bootstrap/scss/type";
//@import "../node_modules/bootstrap/scss/images";
//@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
//@import "../node_modules/bootstrap/scss/tables";
//@import "../node_modules/bootstrap/scss/forms";
//@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
//@import "../node_modules/bootstrap/scss/button-group";
//@import "../node_modules/bootstrap/scss/input-group";
@import "../node_modules/bootstrap/scss/custom-forms";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
//@import "../node_modules/bootstrap/scss/card";
//@import "../node_modules/bootstrap/scss/breadcrumb";
//@import "../node_modules/bootstrap/scss/pagination";
//@import "../node_modules/bootstrap/scss/badge";
//@import "../node_modules/bootstrap/scss/jumbotron";
//@import "../node_modules/bootstrap/scss/alert";
//@import "../node_modules/bootstrap/scss/progress";
//@import "../node_modules/bootstrap/scss/media";
//@import "../node_modules/bootstrap/scss/list-group";
//@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/modal";
//@import "../node_modules/bootstrap/scss/tooltip";
//@import "../node_modules/bootstrap/scss/popover";
//@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/utilities";
//@import "../node_modules/bootstrap/scss/print";
functions variables mixins は必須。 rootとrebootもほとんどの場合必要だろう。その他は必要に応じてimportする。
以上