[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を追加します。

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のコンパイルができるようになります。

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

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)を導入する

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

$ ruby bin/importmap pin bootstrap

Popper.jsを導入する

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

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タグの中に以下のスクリプトを追加することでも動作するようです。

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のおかげで、簡単にビルドすることができます。

$ yarn build:css

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

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

$ yarn build:css --watch

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

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

Bootstrap5 公式Docsより

<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を編集したら自動でビルドされるようになります。

$ foreman start -f Procfile.dev

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

例

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

Github

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