Bootstrap5をカスタマイズしたい

Tweet

Category css, develop 2023/09/01

問題

Bootstrapの色を変えたり、行間を変えたりしたいです。

答え

Bootstrapの見た目を変える方法。

CSSを書けば済むパターン

CSS変数で対応できるものは以下でよい。

:root {
  --bs-font-sans-serif:"Noto Sans JP",sans-serif;
  --bs-body-bg: #DEDAEA;
}

全体的にremが使用されており、全体的な大きさ、フォントサイズを変更したいときは以下で済む。

html {
  font-size:14px;
}

sassの再コンパイルで対応する例

色は、指定された色をもとにさまざまに計算されて展開されているので、いい感じにつじつまが合うようにCSS変数を変更するには多数の変数を指定することになったりする。

例）primary の色を青から赤に変えたい → –bs-primary: #ff0000; を指定しても、全体的に色が変わってくれるわけではない。

テーマカラーを変えたい場合などには、元のsassから再コンパイルするのが簡単。

sassを使えるようにするためにnpmを使えるようにする

インストール例

dnf install nodejs

→ 依存関係で npm などがインストールされる

sassを使えるようにする

インストール例

npm install -g sass

→ グローバルにインストールされるので sass コマンドが使えるようになる

管理者権限がない場合は、作業用ディレクトリ内で以下を実行すれば、ローカルなsassコマンドがインストールされる。

npm install sass

→ ./node_modules/.bin/sass で実行する。

BootstrapのCSSをsassから生成する

適当な作業場所を確保
mkdir bootstrap5.3
cd bootstrap5.3

必要なものをそろえる
npm install bootstrap
npm install sass ← グローバルにsassがインストールされていないときローカルに用意する

custom.scss を書く
vim custom.scss

記入例

// 例: primaryの青を紫にしたい
$blue: #614398;
// 例: リンクの下線を取りたい
$link-decoration: none;
// 例: 行間を変えたい
$line-height-base:1.8;

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

コンパイル実行例
sass custom.scss:bootstrap-custom.css

コンパイル実行例
./node_modules/.bin/sass --style=compressed --no-source-map custom.scss:bootstrap-custom.min.css

出来上がったcssを好きなところに持って行って使う。