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

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

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

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

概要

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

参考文献・記事

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

http://koyacch.hatenablog.com/entry/2018/02/23/162213

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

https://v5.getbootstrap.com/docs/5.0/customize/sass/

前提

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 に、以下コードを記述します。

application.scss

@import'bootstrap-custom';

_bootstrap-custom.scss の設定

app/javascript/src/_bootstrap-custom.scss を、以下の通り編集します。

変更前

_bootstrap-custom.scss

@import"~bootstrap/scss/variables";

変更後

_bootstrap-custom.scss

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

カスタマイズ方法

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

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

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

変更前

_bootstrap-custom-variables

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

変更後