※Qiita初投稿です。宜しくお願い致します。

BootstrapはCSSフレームワークとして数多くのプロジェクトに導入されていて、
2020年6月にメジャーバージョンアップとして5.0 alpha がリリースされました。

長年使われているフレームワークで採用数も多いことから、デフォルト設定で使用されている場合、
「Bootstrap臭」と揶揄されることもありますが、
カスタマイズすることで柔軟にUIを変えることが可能です。

今回はRails 6.0環境にwebpackerで導入したBootstrap 5.0において、
各変数をカスタマイズする方法についてご紹介します。

概要

Bootstrap内で設定されている_variables.scssの値を、別ファイルから上書き変更します。

参考文献・記事

以下記事で紹介されている方法について、cssをwebpackerで管理する場合に応用した方法になります。

また、以下リンクの公式ページで紹介している方法を参考にしています。

前提

• Railsの設定でcssがwebpackerで管理されている。（この記事内では、app/javascript/src/application.scss が置かれているとします）
• Bootstrapがパッケージマネージャ（yarnなど）でインストールされている。（この記事内では、node_modules/bootstrap がインストールされているとします）

設定手順

app/node_modules/bootstrap 内のファイルをコピーする

app/node_modules/bootstrap 内にあるbootstrap.scssと_variables.scssをコピーして、app/javascript/src フォルダ内に貼り付けます。

app/javascript/src 内のファイル名を変更する

app/javascript/src/bootstrap.scss は _bootstrap-custom.scssに、
app/javascript/src/_variables.scss は _bootstrap-custom-variablesに、ファイル名を変更します。

application.scss の設定

app/javascript/src/application.scss に、以下コードを記述します。

@import 'bootstrap-custom';

_bootstrap-custom.scss の設定

app/javascript/src/_bootstrap-custom.scss の全ての @import について、"~bootstrap/scss/"を追加します。

変更前

@import "variables";

変更後

@import "~bootstrap/scss/variables";

全ての@importを編集後、@import "~bootstrap/scss/variables";を以下の通り編集します。

変更前

@import "~bootstrap/scss/variables";

変更後

/* @import "~bootstrap/scss/variables";
 */
@import "bootstrap-custom-variables";

カスタマイズ方法

app/javascript/src/_bootstrap-custom-variables の各変数を変更することでカスタマイズすることが可能です。

変数は数多く設定されていますので、変更次第でオリジナリティあるUIを統一的に適用することができます。

例：全体的なフォントサイズを小さくしたい場合

変更前

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`

変更後

$font-size-base: 0.9 rem !default;

終わりに

現在私が運営しているsnowwshiroでは、最低限のカスタマイズのみの為まだまだBootstrapらしい仕上がりとなっていますが、今秋のリニューアルにむけて鋭意カスタマイズ作業中です。