3
Help us understand the problem. What are the problem?

posted at

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

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

開発環境&前提条件

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クラスの指定をしてあげれば適応されます🌱


最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?