Railsでbootstrap5でテーマカラーをカスタマイズする

## 環境
- 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](https://getbootstrap.jp/docs/5.3/customize/color/#%e3%83%86%e3%83%bc%e3%83%9e%e3%82%ab%e3%83%a9%e3%83%bc)

編集したい色を上書きしてやります

```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'`よりも上に定義してやります

https://getbootstrap.jp/docs/5.3/customize/sass/#%e5%a4%89%e6%95%b0%e3%81%ae%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88

公式にもある通り、`@import "../node_modules/bootstrap/scss/variables"`より前にカラーやディフォルトの変数を変更してあげる必要があります

```scss
// 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'`ではなく必要な部分だけをインポートする方法が推奨されています（めんどくさいのでやりませんが）

全部インポート
```scss
// 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つインポート
```scss
// 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
```

## 質問

- ただ上書きするだけならシンプルに変数を上書きすれば良いの嬉しい
- 今後のフレームワークどうなるのだろうか、他も触らんとなぁ

## 参考
https://getbootstrap.jp/docs/5.3/customize/sass/#maps-and-loops