【Rails】Bootstrap5の導入

目的

Railsで作成したアプリにBootstrap5を導入する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

前提

• アプリが作成されている。
• アプリ名はtest-appとする。

手順

1. 前置き
2. Bootstrapのインストール
3. application.jsの設定
4. application.scssの設定
5. application.html.erbの設定
6. 最終確認

前置き

今回、RailsにBootstrap5を導入しますが、
Bootstrap5からjQueryが不要になったようですのでインストールは不要です。

Bootstrapのインストール

では早速始めていきます！
まず、YarnでBootstrapに必要なパッケージをインストールします。

必要なパッケージはbootstrapとpopper.jsの2点です。

ターミナル

$ yarn add bootstrap@next
$ yarn add @popperjs/core

これでインストールができました！

application.jsの設定

続いてapplication.jsの設定です。

app/javascript/packs/application.js

//省略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap";
import "../stylesheets/application";

//省略

application.scssの設定

次にapplication.scssの設定ですが、application.scssというファイルは存在しないので、
app/javascript/stylesheets/というディレクトリを作成し、その中にapplication.scssファイルを作成してください！

app/javascript/stylesheets/application.scss

@import "bootstrap";

application.html.erbの設定

最後に「stylesheet_pack_tag」を追加します!

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

最終確認

これでBootstrapは導入できたかと思います。
ビューファイルに以下のコードを記載し確かめてみてください！

index.html.erb

<%= link_to "最終確認用ボタン", "#", class: "btn btn-primary" %>

最後に

以上でBootstrap5の導入は完了です。
あとはビューファイルを各々編集してください。
では。