Rails6.1 | Bootstrap5.3の導入 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

Bootstrapを利用する準備をします。

Yarnで必要なパッケージ「Bootstrap」「jquery」「popper.js」をインストールします。

コマンド
yarn add jquery@3.7.0 bootstrap@5.3 popper.js@1.16.1

「popperjs/core」をインストールします。
コマンド
yarn add @popperjs/core

記述追加　app/javascript/packs/application.js(11行目)

require("jquery")

import 'bootstrap';
import '../stylesheets/application';

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

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


require("jquery")

import 'bootstrap';
import '../stylesheets/application';

「app/javascript」フォルダに「stylesheets」フォルダを新規作成します。
作成した「stylesheets」フォルダに「application.scss」ファイルを新規作成します。

作成した「application.scss」ファイルに以下の記述を追加します。

app/javascript/stylesheets/application.scss（新規作成したファイル）

@import '~bootstrap/scss/bootstrap';

Webpackの設定をします。
「config\webpack\environment.js」ファイルに以下の記述を追加します。

記述追加　config\webpack\environment.js(5行目)

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

config\webpack\environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

「app/views/layouts/application.erb.html 」の「stylesheet_link_tag」を「stylesheet_pack_tag」に変更します。

記述変更　app/views/layouts/application.erb.html（8行目）

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

app/views/layouts/application.erb.html

<!DOCTYPE html>
<html>
  <head>
    <title>MinpakuBs</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

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

これでBootstrapを使用する準備が整いました。

Railsのサーバーを起動してみます。
コマンド　rails s

サーバーが起動したら、ブラウザで確認します。
http://localhost:3000

開発環境ではこれでBootstrap5.3を利用することができますが、本番環境では、コンパイル時にエラーが出てデプロイできません。
これはRails6ではBootstrap5.3を動かすためのWebpackerのバージョンがHerokuで揃わないためです。
Rails6でBootstrapを導入する場合は、「bootstrap@4.5.2」を利用すると良いです。
この場合のインストールコマンドは以下の通りになります。
yarn add jquery@3.6.0 bootstrap@4.5.2 popper.js@1.16.1

どうしてもRails6でBootstrap5.3を利用したい場合、裏技があります。
CSSとJSをCDN経由でインクルードしてしまえば、Bootstrap5.3の記述が利用できます。
その場合、以下の記述を「app/views/layouts/application.html.erb」ファイルのheadタグに含めます。

    <!-- bootstrap5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>