前書き
Rails7にBootstrap5を入れようと思い、公式ドキュメントの手順を踏んでみたものの各所でエラーを吐いてしまった。
エラーを回避した方法を含め、Bootstrap5の導入手順をここにまとめたい。
なお、既存のアプリに対して導入する手順なので、新規アプリ作成時に導入する方法は記載しない。
環境
WSL2
Ubuntu
Docker
Rails7
Ruby 3.1.3
実行手順
基本的には公式ドキュメントに記載の手順に従うものとする。
gem 'bootstrap', '~> 5.2'
gem 'mini_racer'
railsサーバー起動時にExecJS::RuntimeUnavailableというエラーが出る。これの対応としてmini_racerをGemfileに追記する。
[参考記事]
$ docker compose build
app/assets/stylesheets/application.cssの名前を、app/assets/stylesheets/application.scssに変更する。
その後ファイル内に記載の文字列を全て削除し、以下に示すように書き換える。
@import 'bootstrap';
importmap.rbに追記する。
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true
assets.rbを書き換える。
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
railsサーバーを起動してlocalhost:3000にアクセスする。
補足
サーバー起動後、Asset was not declared to be precompiled in...というエラーページに飛ばされることがあった。
エラーメッセージの後に続く文章に示された方法を試した。
以下の内容をmanifest.jsに追記する。
//= link popper.js
//= link bootstrap.min.js
補足②
ドロップダウンメニューなどが正常に動作しなかったため、その対応方法を調べた。
Javascriptの読み込みが必要で、下記に示す変更を行った。
import "popper" //追記
import "bootstrap" //追記
終わりに
railsを半年ほど前から触りはじめましたが、まだまだ勉強不足に感じます。
拙い点が目立つと思われますが、どうかご容赦を......
私と同じくrails初学者の方あるいはそうでない方でも、この記事が誰かの参考になっていれば嬉しく思います。良きエンジニア・ライフを！