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”

Leave a Reply

Your email address will not be published.

CAPTCHA