開発環境
Rails 7.0.8
Ruby 3.1.3
Bootstrap 5.3.0
導入手順
1.Gem導入
Gemgileに以下２つのgemを追加
Gemfile
gem 'bootstrap', '~> 5.3.0'
gem 'jquery-rails'
gem "sassc-rails" #コメントアウトをなくす
ターミナルにて、インストール
terminal
bundle install
2.CSS編集
app\assets\stylesheets\application.cssを".scss"に変更
中身を全て消して以下のコードに変更
application.scss
@import "bootstrap";
3.javascriptの設定
a) Configファイルの編集
config\importmap.rb
以下のコードを追記(位置はどこでも良い）
importmap.rb
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true
※バージョンによっては、"bootstap.min.js"ではなく、"bootsrap.js"と書く
b) assets.rbファイルの編集
config\initializers\assets.rb
以下のコードを追記(位置はどこでも良い）
assets.rb
Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
# a)で"bootstap.min.js"ではなく、"bootsrap.js"と書いた場合は、こちらも同じに直す
c) application.jsファイルの編集
app\javascript\application.jsに以下のコードを追記（import "@hotwired/turbo-rails"の上に書く）
application.js
//= require jquery3
//= require popper
//= require bootstrap
バージョンによっては以下のコードにする
application.js
//= require jquery3
//= require popper
//= require bootstrap
Javascriptがページをリロードしないと読み込まないとき
application.jsを修正する
app\javascript\application.js
//下記をコメントアウト又は削除
// import "@hotwired/turbo-rails"
//下記に書き換える
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
Turboの無効化した場合、リンクからコントローラーのPOSTメソッドに飛ばすには、turbo: trueオプションを追加する。
HTML
<%= link_to "Logout", logout_path, data: {turbo: true,"turbo-method": :post} %>
参考