Rails7 に Bootstrap5を導入しよう！

こんばんは。
Railsの案件にアサインされることになリました。
表題の件でつまづいたので、備忘録として書き残しておきます。

※ importmapを使用した導入方法です。
rails new時に-cオプションにbootstrapを指定した場合は、esbuildが導入されているので、そちらの手順に従ってください！！！

必要な対応

CSS

• Gemfileに以下を追記

gem ‘bootstrap’, ‘~> 5.2.0’

• gemインストール

bundle install

• app/assets/stylesheets/application.cssの名前をaplication.scssに変更
  app/assets/stylesheets/application.scssの中身を全て削除し、以下を追記

@import “bootstrap”;

• CSSが適用されているか確認してください。

JavaScript

DropDownなどのJavaScriptの読み込みが必要なコンポーネントはこのままでは動かないので、以下の対応を実施

• config/initializers/assets.rbに以下を追加

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

• config/importmap.rbに以下を追加

pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

• app/javascript/application.jsに以下を追加

import "popper"
import "bootstrap"

まとめ

以上です。
bootstrapを活用して快適なフロントエンド開発を実現していきましょう。