Rails8でのBootstrapセットアップ方法

この記事では、Rails 8の標準構成のツールを利用してBootstrapをセットアップする方法をご紹介します。

手順

基本的には公式GitHubレポジトリのインストール方法の通り進めますが、最後にapp/javascript/application.jsへのimport文の追加も行います。

dartsass-railsの公式GitHubレポジトリに記載されている通りに、以下の2つのコマンドを実行します。

$ ./bin/bundle add dartsass-rails
$ ./bin/rails dartsass:install

Gemfileに以下の内容を追加します。（Bootstrapのバージョン指定は、公式GitHubレポジトリの情報などを参考に、目的に合った設定を行ってください。）

gem "dartsass-rails", "~> 0.5"
gem "bootstrap", "~> 5.3"

Node.jsがインストールされていない環境の場合には、さらにGemfileに以下の内容も追加します。（Bootstrapは間接的にJavaScriptランタイムを必要とするため）

gem "mini_racer"

Gemのインストール・コマンドを実行します。

$ bundle install

.cssファイルから.scssファイルに切替を行います。

まず、app/assets/stylesheets/application.scssの内容として以下の1行を記述します。（「// Sassy」の1行は削除してOK。）

@import "bootstrap";

次に、app/assets/stylesheets/application.cssの内容を確認し、必要な内容がなければこのファイルを単に削除してしまいます。rails newをしてからそのままの状態であれば、特に必要な内容はなく、削除で良いはずです。

必要な内容がある場合には、.scssファイルに必要な内容を移行します。移行が終わったら、.cssファイルは削除します。

BootstrapのCSSの機能のみを利用する場合には、以上の設定だけでも大丈夫のはずです。しかし、ドロップダウンメニューなどで、BootstrapのJavaScriptの機能を利用する場合には、以下の設定も必要となります。

以下のように、config/initializers/assets.rbのprecompileにbootstrap.min.jsとpopper.jsを追加します。

Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)

config/importmap.rbに以下の2行を追加します。

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

app/javascript/application.jsに以下の2行を追加します。

import "@popperjs/core"
import "bootstrap"

以上の設定でBootstrapが利用できるようになります。

Railsでの開発に関係する様々なTips（短めの技術情報）をTechTipsで発信しています。ご興味があればぜひご覧ください。