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

開発環境

Rails 8.0.1
Ruby 3.2.2
Bootstrap 5.3.3

Rails 7の場合はこちらの記事から　
【Rails 7】Bootstrapのインストール

導入手順

1.Gem導入

Gemgileに以下２つのgemを追加

Gemfile

gem "dartsass-rails"
gem "bootstrap", "~> 5.3.3"

ターミナルにて、インストール

terminal

bundle install

2.dartsassのインストール

ターミナルにて以下のコマンドを実行

terminal

rails dartsass:install

3.CSS編集

application.scssに以下のコードを追加。（application.cssファイルは不要なため削除。）

application.scss

@import "bootstrap";

4.javascriptの設定

a) config\importmap.rb
以下のコードを追記(位置はどこでも良い）

config/importmap.rb

pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true

b) app/javascript/application.jsに以下のコードを追記

application.js

import "@hotwired/turbo-rails"

import "@popperjs/core"
import "bootstrap"

import "controllers"

4.デプロイ時

a) 開発環境でscssが反映されるようにする

Procfile.devの書き換え

①：「Procfile.dev」のファイル名を「Procfile」に変更
②：中身の修正(bin/を削除）

Procfile

- web: bin/rails server -p 3000
+ web: rails server -p 3000

- css: bin/rails dartsass:watch
+ css: rails dartsass:watch

rails sの代わりに以下のコマンドで実行(foremanを使って実行）

terminal

foreman start -f Procfile
or
foreman start

b) 毎回実行する場合

terminal

rails dartsass:watch
rails server

参考