【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）をごらんください。環境…

qiita.com

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

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

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

【教育・学習】資格・学習

総合情報サイト「コレダ！」がお届けする教育・学習における資格・学習の総合情報サイトです。