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_...
②

Rails 6にjQueryとBootstrapを入れる - Qiita
この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、Rails 6/7にjQueryとBootstrap 5を入れる(その1)をごらんください。
環境: Rails 6.0、Webpac...
RailsとyarnとBootstrapそれぞれでバージョンが異なることにより、インストール方法もまちまちであることから、ネット上にいろんなインストール方法が溢れているのだろうと思います。
ぜひ今回ご紹介した方法をお試しください。
独学で躓いてしまっている場合、プログラミングスクールに通うより圧倒的にコスパの良いUdemyでの学習を個人的にはおすすめします!

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