※ 本記事は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の導入で悩んでいる方に届けば幸いです🙇♂️