【Rails 7】Bootstrapのインストール

開発環境

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} %>

参考