Bootstrap5.3.0をSassを編集してカスタマイズする

Bootstrapをカスタマイズしたい

CSSフレームワークとして有名なBootstrap。簡単に綺麗なサイトが作れて嬉しいが、王道というか、Bootstrapっぽいなと一目でわかってしまう。
新しいWebサービスを開発するにあたって、少しだけでもカスタマイズしたいなと思い、方法を模索してみた。

バージョン・環境

bootstrap:バージョン：5.3.0
利用端末OS:MacOS Ventura バージョン13.3

はじめに

Bootstrap5.3のドキュメントに基本的に書いてある。

ただ、具体的にどのファイルをダウンロードして、どのコマンドを実行して、、、といった詳しい情報はないので、その情報を補完する。という方針で本記事は書いていく。

ファイルダウンロード

ダウンロードするファイルはまとまっている。いくつかダウンロードする方法が書かれている。色々試したが、カスタマイズなしに単純に利用するいずれかの方法でダウンロードすれば良さそう。
ただ、カスタマイズする場合はソースが含まれている必要があるので、[ソースダウンロード]をする。

環境準備

カスタマイズするために、Sassをコンパイルできるようにならないといけないようなので、導入していく。

上記のサイトでは、Homebrew→rbenv→Sassと導入している。rubyのバージョンはたまたま出てきたのでruby 3.0.6を指定した。

ファイルの構成

ダウンロードしたファイルについて簡単な説明。注目すべきは、4つ。

bootstrap-5.3.0
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── _site
├── build
├── composer.json
├── dist　→ファイルが吐かれる場所
├── hugo.yml
├── js
├── node_modules　→いろんなモジュールがある場所
├── nuget
├── package-lock.json
├── package.js
├── package.json →コンパイルのコマンドとか設定されてる
├── resources
├── scss　→ソースコードがある
└── site

Sassコンパイルの仕方

その1 Sassコマンド

scss [ソースファイル].scss [生成後ファイル].css

一番シンプルにできる。

その2 npmコマンド

準備が必要になる。npmコマンドが利用できる状態で、package.jsonと同じディレクトリに移動する。

npm init
npm install
npm test

以下のコマンドでコマンドリストが出力される。

npm run

このコマンドで、cssのコンパイル関連のコマンドがいくつか動く。

npm run css

準備等もあり、手間もかかるが、「ミニファイ」されたもの（bootstrap.min.cssのような「min」がついたファイル）が生成されることがメリットである。要は同じ動作で容量の少ないファイルができるということ。
（package.jsonをよく読めば、ミニファイされたもののみコマンドで生成することも可能だと思うが、使いたかったらガンバッテクダサイ）

カスタマイズの仕方

基本的には、以下のページに沿って実施した。が、補足を記載しておく。

補足1　ファイル構成

「npmのようなパッケージマネージャを使っている場合」は、「その2」の方法を利用している場合である。node_modulesにはbootstrap は存在しないので、フォルダを作ってコピーしてあげる必要がある。

mkdir node_modules/bootstrap
cp -r scss node_modules/bootstrap/
cp -r js node_modules/bootstrap/

また「npmのようなパッケージマネージャを使用していない場合」は、「その1」の方法を利用している場合である。
　

補足2　インポート

Option A　と　Option B　が記載されている。両方試した結果、カスタマイズするならOption B で良いのではと思っている。

こちらがOption Aで bootstrapのみを読み込み、あとは追加カスタムコードを追加するというシンプルなもの。

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

ただ、以下のようにしたとき、変更が反映されなかった。（追加したコードは「Mapに追加」の項目のもの）

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

一方、Option Bの2.の部分に同様のコードを追加したときは、変更が反映された。

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
//追加したのはここだよ
// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
 
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

変数の変更は、どこに差し込んでもいいというわけではなさそう。

補足3 最適化について

Option B　だが、最低限のコンポーネントしか記載していないため、適宜利用したいものを追加する必要がある。

使いたい機能となんとなく名前が同じなのでわかるが、管理しづらいため
以下のように全て書いておいて、私は適宜コメントアウトするようにした。

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/list-group";
// additional
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/dropdown";
//@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/button-group";
//@import "../node_modules/bootstrap/scss/card";
//@import "../node_modules/bootstrap/scss/accordion";
//@import "../node_modules/bootstrap/scss/breadcrumb";
//@import "../node_modules/bootstrap/scss/pagination";
//@import "../node_modules/bootstrap/scss/badge";
//@import "../node_modules/bootstrap/scss/progress";
//@import "../node_modules/bootstrap/scss/close";
//@import "../node_modules/bootstrap/scss/toasts";
//@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/spinners";
//@import "../node_modules/bootstrap/scss/offcanvas";
//@import "../node_modules/bootstrap/scss/placeholders";


// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

コメントアウトしているインポートのものは、以下を参考に作成した。

補足4 コンポーネントの依存性がよくわからない話

navbarを使いたくて、navbarをインポートしてみると、スマホ画面表示の際に、ハンバーガメニューが閉じない状態になった。

transitionsをインポートするとハンバーガが閉じるようになった。この辺の依存関係はわからない。コードを読めばわかるのだろうけど、、、