<備忘録> rails6でbootstrap5系を使う方法

#環境

• macOS Monterey 12.0.1
• Ruby 3.0.3
• Bundler 2.2.32
• Rails 6.1.4.1

#bootstrapを導入
今回はwebpackを使ってbootstrap5.1.3 を導入していきます。

 $ yarn add bootstrap@next #bootstrapをインストール(バージョン選択)
 $ yarn add @popperjs/core

#application.jsの設定

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
#追記
import "bootstrap"
import "../stylesheets/application"
import "channels"
#ここまで
Rails.start()
Turbolinks.start()
ActiveStorage.start()

#application.html.erbの設定

application.html.erb

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>　#追加

以上でbootstrap5の導入は終わりです。