Bootstrap 5系のカスタマイズの私なりの流儀(2024年版)

要約

• Pure Javascriptでweb作るよ
• Bootstrap v5.3.3を使って装飾していくよ
• けど「Bootstrapっぽさ」は消していきたいよ
• そのためにカスタムScssファイルを用意するよ
• まず色遣いを変えたいよね
• ほかの印象も変えたいよね
• 色遣いは誰かに決めてもらいたいよね

Pure Javascriptでweb作るよ

開発環境

• Node.js 22.12.0
• npm 10.9.2
• bootstrap 5.3.3
• @popperjs/core 2.11.8
• sass 1.69.7
• vite 5.4.11

viteの環境設定（vite.config.js）については、私の過去記事「Vite v4での個人的お気に入り設定を公開（旧題：Viteお試し中、Webpack5からViteに移行し始めました） #JavaScript - Qiita」にある通り。

なお、voltaにてプロジェクトにnodeとnpmのバージョンを固定させている。

sass(Dart Sass)について、最近は開発が活発でモジュール化など先進的な取り組みが盛り込まれている反面、バージョンが新しすぎるとsassコードの書き方が非推奨だから直せみたいなwarningが大量発生してしまう。
すると、Bootstrap側や他のJSパッケージが持ってるScssコードまでチェックされてここを直せあそこを直せと大変騒がしくなる。
そこまではしたくないので、そういうwarningが出にくい古いバージョンをなんとなく探して都度試してみて、warningがでないバージョンで固定している。

Bootstrap v5.3.3を使って装飾していくよ

とりあえずBootstrapは最新のを使っている。
古くなると古いバージョンのドキュメントが怪しくなってしまうため、新規開発するときはその時の最新版で試すことにしている。

けど「Bootstrapっぽさ」は消していきたいよ

ただ、Bootstrapで開発すると、見た目がいかにもBootstrapですというふうになる。

具体的には、

• 原色チックな色遣いを止めたい
• 角丸ボタンを止めたい（角を角ばらせたい）

という最低ラインを考えている。

そのためにカスタムScssファイルを用意するよ

英語版の公式サイトの説明

Customize · Bootstrap v5.3
Sass · Bootstrap v5.3

日本語訳の説明

カスタマイズ · Bootstrap v5.3
Sass · Bootstrap v5.3

読んでもちょっとわかりにくいけど、躓いたときにはここに立ち戻るよ。

Sassファイルを起こす

bs_custom.scss というファイル名でいつもやってる。
上記の説明ページを読んでも、今一つピンと来なくて、今までろくに成功してなかったんだけど、やっと成功したからそのまま掲載してみる：

// 何の定義よりも先に、functions
@import "../node_modules/bootstrap/scss/functions";

// node_modules/bootstrap/scss/_variables.scss から拝借、!defaultは削除、カラーコードを書く
$primary:       #0d6efd;
$secondary:     #6c757d;
$success:       #198754;
$info:          #0dcaf0;
$warning:       #ffc107;
$danger:        #dc3545;
$light:         #f8f9fa;
$dark:          #212529;

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);
// ここまで

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

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

// node_modules/bootstrap/scss/bootstrap.scss にある定義を拝借、パスの整合性に注意
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/root";

// Layout & components
@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/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/nav";
@import "../node_modules/bootstrap/scss/navbar";
@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/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@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";

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

// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";

使用していないBootstrapの機能を本来コメントアウトするなり行削除するなりするものらしいけれど、
開発中に使うコンポーネントが変わったりして「なぜ反映されない？」と悩むことを避けるために、全部入りのまま使ってる。

まず色遣いを変えたいよね

Mapとloopで解説されているように、Bootstrapであらかじめ定義されている$primaryとか$secondaryとかのカラーコードを書き換えるとOK。

新たなカラーテーマを加えるのも、$custom-colorsを定義してから
$theme-colors: map-merge($theme-colors, $custom-colors);
とすることで加わるらしい。

ほかの印象も変えたいよね

オプション · Bootstrap v5.3
にある変数のリストから、いじりたいものを検討する。

角丸ボタンから、カクカクボタンに変更

// 角丸ボタン禁止
$enable-rounded: false;

逆に、角めちゃ丸く

半径の説明通りにclassを書き加えるのが基本らしいけど、htmlサイズ肥大化につながるしやってられないよねって場合に。

node_modules/bootstrap/scss/_variables.scss にある定義を拝借する。
「!default」は削除する。

// 角丸の半径を上書き
$border-radius:               1rem;

そのほかにも

node_modules/bootstrap/scss/_variables.scss を見ていれば、「この変数を上書きしたらどうなるかな？」って発想がわいてくるはず！

色遣いは誰かに決めてもらいたいよね

例えば「Huemint - Generate a color palette for your bootstrap theme」というサイトでは、Bootstrapであらかじめ定義されているカラーコードを、いくつかのアルゴリズムを駆使して「整った」色遣いで考えてくれる。これはありがたい。
しかし、ページ末尾にあるScssコードをそのまま貼り付けても反映されないので、先に示したScssコードの上で、カラーコードだけ拝借して適用すると良いかと。

例えば生成されたカラーコード群がこうだったとする：

$white: #ffffff;

$theme-colors: (
    "light":      #f0ddc6,
    "dark":       #121b24,
    "primary":    #297786,
    "secondary":  #41484a,
    "info":       #ba5655,
    "success":    #1c9a4e,
    "warning":    #e6c61e,
    "danger":     #ee0e29,
);

ならば、こう書き換える：

$primary:       #297786;
$secondary:     #41484a;
$success:       #1c9a4e;
$info:          #ba5655;
$warning:       #e6c61e;
$danger:        #ee0e29;
$light:         #f0ddc6;
$dark:          #121b24;

いかがでしたか？