【Rails】Rails6にBootstrapを導入する方法

Rails6へのBootstrapの導入手順について、Googleの海に出るといろんな方法がある。。

どれが正しいからわからないのでひとつずつ試すしかない。ということで試してみました。

実際に出来た方法が、Yarnを使ってインストールする方法 です。

Bootstrapのバージョンによってもインストール方法は異なり、今回はBootstrap4を導入します。

iQeuryとpopper.jsを同時にインストールする

popper.jsはBootstrap4の一部のコンポーネントで必要となるためインストールします。

$ yarn add jquery@3.5.1 bootstrap@4.5.0 popper.js@1.16.0

@を付けることでインストールするバージョンを指定することができます。

jqueryを読み込む設定をする

config/webpack/environment.jsを下記のように編集します。

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: 'popper.js'
    })
)
module.exports = environment

BootstrapのCSSを読み込む設定を行う

app/javascript下にstylesheetsディレクトリを作成し、その下にapplication.scssファイルを作成します。

@import '~bootstrap/scss/bootstrap';

これにより、Bootstrapを読み込ませるマニフェストファイルの拡張子を合わせています。

BootstrapのJSを読み込む設定を行う

app/javascript/packs/application.jsに追記する。

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

これでRails6にBootstrapを導入することができました。

うまく行かなかった2つの方法を参考にリンクを貼っておきます。

①

【Rails】Webpackerを使ってjQueryとBootstrapを管理する方法

はじめに 本記事では、Rails 6.0から導入された「Webpacker」を使ってjQueryとBootstrapを管理する方法を説明します。 WebpackerでjQueryとBootstrapを管理 Railsアプリの作成 以下のコマンドを実行して、新しいRailsアプリを作成します。コマンド引数に_6.0.0_...

autovice.jp

②

Rails 6にjQueryとBootstrapを入れる - Qiita

この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、Rails 6/7にjQueryとBootstrap 5を入れる（その1）をごらんください。 環境: Rails 6.0、Webpac...

qiita.com

RailsとyarnとBootstrapそれぞれでバージョンが異なることにより、インストール方法もまちまちであることから、ネット上にいろんなインストール方法が溢れているのだろうと思います。

ぜひ今回ご紹介した方法をお試しください。

独学で躓いてしまっている場合、プログラミングスクールに通うより圧倒的にコスパの良いUdemyでの学習を個人的にはおすすめします！

はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう

Rails7対応。汎用性が高くPythonやPHPと同様に人気のある Rubyを使ってWebアプリケーション開発に挑戦しよう。基礎からAWSでの開発環境構築、Herokuを使ってインターネットにで公開するまでを体系的に学べる

www.udemy.com