こんばんは。
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を活用して快適なフロントエンド開発を実現していきましょう。