Rails7のアプリに後からBootstrap5を追加する時

Rails7のアプリに後からBootstrap5を追加する時

Bootstrap5のCSS

1. Gemfileにgem ‘bootstrap’, ‘~> 5.2.0’を記載してbundle install
2. 続いてapp/assets/stylesheets/application.cssの名前をaplication.scssに変更
3. app/assets/stylesheets/application.scssの中身を全て消して、@import “bootstrap”;を記載
4. view側でbootstrapのCSSが使用できるようになる

Bootstrap5のJavaScript

※ドロップダウンが動かないなどの場合は、こちらのJavaScriptの設定が必要です。

※今回はinportmapを使って、JS/CSSのバンドルをします。

1. cat config/importmap.rbでimportmapが入っているか確認
2. もし入ってなければrails importmap:install
3. importmap経由でbootstrapを使えるようにするため、bin/importmap pin bootstrapを実行
4. app/javascript/application.jsにimport ‘bootstrap’を追記
5. config/importmaps.rbに記載されているpopperjsの記載では、ga.jspmではなく、unpkg.comを使う。理由はga.jspm.ioには不具合のあるパッケージが含まれているため。具体的にpin “@popperjs/core”, to: “https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js”