【2022年最新】Rails6にBootstrap5を導入する方法 #Ruby

※ 本記事はRails6でBootstrap5を導入したい方向けの記事です！
※ Rails5やBootstrap４など、バージョン違いのものを導入する場合とは手順が異なります！

開発環境＆前提条件

Ruby 3.0.2
Rails 6.1.4.4
導入したBootstrap 5.1.3
Rails6でrails newしてある状態

Bootstrap5のインストール

terminal

% yarn add bootstrap

上記コマンドでBootstrapの最新バージョンがインストールされます！
バージョンを指定する場合👇

terminal

% yarn add bootstrap@バージョン番号

ドロップダウンなどのポップアップ要素をいい感じにしてくれるpopper.jsもインストールします！

terminal

% yarn add @popperjs/core

application.html.erbに追記

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <% stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%# ここを追加👇 %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
　　　　　　　　<%# ここを追加👆 %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

上記の通り、stylesheet_pack_tagの一文を追加します！

application.scssの作成・追記

Bootstrapを読み込むためのファイルを作成します！
app/javascript配下に、stylesheetsフォルダを作成、そのフォルダの中にapplication.scssファイルを作成します！

terminal

% mkdir ./app/javascript/stylesheets
% touch ./app/javascript/stylesheets/application.scss

作成したapplication.scssに以下を追記します！

app/javascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap.scss";

application.jsに追記

上記application.scssを読み込む記述をapplication.jsに追記します！

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
// ここを追加👇
import "bootstrap";
import "../stylesheets/application.scss";
// ここを追加👆

Rails.start()
Turbolinks.start()
ActiveStorage.start()

これでBootstrap5の導入は完了です！
あとはいつも通りBootstrapクラスの指定をしてあげれば適応されます🌱

追記

上記まで追記して、もし適用されなかったら下記のコマンドを実行してみてください！

terminal

% bin/webpack-dev-server

最後に

Rails6にBootstrap5を導入する記事が少なかったので本記事を作成しました。
本記事がBootstrapの導入で悩んでいる方に届けば幸いです🙇‍♂️