環境
- Rails8
- ruby 3.3.6
- jsのバンドラー esbuild
- bootstrap5
読んで欲しい人
- Railsでcssのフレームワークをbootstrapにしているかつ、bootstrapディフォルトだとダサいからカスタマイズしたいなぁと思っている人
- ドキュメント読み間違えて時間を溶かしている過去の自分
テーマカラーの上書き
カスタム用のscssファイルを作成する
app/assets/stylesheets/配下にscssファイルを追加します
こんな感じ
app/assets/stylesheets/custom.scss
テーマカラーをカスタム
bootstrapでテーマカラーとして定義されているのは下記の一覧です
scss/_variables.scss
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
よく見るprimaryやらsuccessが定義されています
※詳しくはカラー · Bootstrap v5.3
編集したい色を上書きしてやります
custom.scss
$primary: red;
今回はprimaryを赤色として上書き
app/assets/stylesheets/application.bootstrap.scssにインポート
app/assets/stylesheets/application.bootstrap.scss
@import 'custom';
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap/scss/bootstrap'よりも上に定義してやります
公式にもある通り、@import "../node_modules/bootstrap/scss/variables"より前にカラーやディフォルトの変数を変更してあげる必要があります
// Required
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// 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/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
上書き完了す
補足
ちなみにbootstrapのインポートは@import 'bootstrap/scss/bootstrap'ではなく必要な部分だけをインポートする方法が推奨されています（めんどくさいのでやりませんが）
全部インポート
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
必要なのを1つ1つインポート
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@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/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here
質問
- ただ上書きするだけならシンプルに変数を上書きすれば良いの嬉しい
- 今後のフレームワークどうなるのだろうか、他も触らんとなぁ
参考