※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らしい仕上がりとなっていますが、今秋のリニューアルにむけて鋭意カスタマイズ作業中です。