[Rails7] 後からBootstrap5を導入する

# 前提環境

```
$ ruby -v
ruby 3.0.3p157 (2021-11-24 revision 3fb7d2cadc) [x64-mingw32]
$ rails -v
Rails 7.0.1
```

設定などはRails7プロジェクトを作成したままのデフォルトです。

# cssbundling-rails gemをインストールする

コマンドを実行してcssbundling-rails gemを追加します。

```shell
bundle add cssbundling-rails
```

# Bootstrap5(CSS)をインストールする

以下のコマンドを実行してインストールします。

```
$ rails css:install:bootstrap
```

# sassのコンパイル用スクリプトを追加

`package.json`に、`"scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" }`を追加します。
`yarn build:css`を実行することで、sassのコンパイルができるようになります。

※環境によっては自動で追加されることもあるそうなので、既に追加されていそうだったら次に進んでください。

```json:package.json
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "sass": "^1.48.0"
  },
  "scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" }
}
```

# Bootstrap5(JS)を導入する

以下のコマンドを実行します。

```terminal
$ ruby bin/importmap pin bootstrap
```

# Popper.jsを導入する

Bootstrap5ではPopper.jsに依存しているため追加する必要があります。
`importmap pin bootstrap`でもPopper.jsの設定は追加されるようですが、esmに対応していない？ようでそのままでは使用できなかったので、別のcdnを参照しています。([フォロワーさんに教えて頂きました！](https://twitter.com/kazuemon_0602/status/1480700615546531843))

```diff:importmap.rb
- pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js"
+ pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js"
```

発生していたエラー

```
Uncaught ReferenceError: process is not defined
```

## 追記
このエラーですが、 `app/views/layouts/application.html.erb` のheadタグの中に以下のスクリプトを追加することでも動作するようです。

```erb:app/views/layouts/application.html.erb
<%# hack for popperjs error: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960 %>
<script>
    window.process = {env: {}}
</script>
```

# CSSをビルドする

Bootstrap自体はsassで読み込んでいますが、そのままだとブラウザでは読み込むことができないのでcssにビルドします。
先程、`package.json`に追加したscriptsのおかげで、簡単にビルドすることができます。

```terminal
$ yarn build:css
```

## CSSを変更したら自動でビルドされるようにする

`--watch` オプションを付けます。

```terminal
$ yarn build:css --watch
```

# 正常に動作しているか確認する

試しにドロップダウンを表示して、正常に表示されるか確認します。
ドロップダウン動作をすることで、jsが読み込まれているかも確認することができます。

[Bootstrap5 公式Docs](https://getbootstrap.jp/docs/5.0/components/dropdowns/#single-button)より

```html
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
```

# Foremanを使う(任意)

Foremanを使うことで、Railsサーバーの起動と同時にsassビルド用のスクリプトも起動してsassを編集したら自動でビルドされるようになります。

```terminal
$ foreman start -f Procfile.dev
```

エラーで起動できない場合は、環境によって`Procfile.dev`のコマンドを変更してください。

```diff:例
- web: bin/rails server -p 3000
+ web: rails server -p 3030
css: yarn build:css --watch

```

# Github

サンプルとして完成品をGithubで公開しました！
コミットログのdiffなど確認しながらやると分かりやすいかもしれません。
https://github.com/PJZ9n/Bootstrap5Rails7