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

プログラミング

Rails6へのBootstrapの導入手順について、なぜこうも方法がいろいろあるのか。。

どれが正しいからわからないのでひとつずつ試すしかない。

実際に出来た方法がこちら。

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';

参考

①この方法ではできなかった。

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

②この方法でも出来ず

Rails 6にjQueryとBootstrapを入れる - Qiita
環境: Rails 6.0、Webpacker 4.2 Rails 6にjQueryとBootstrapを入れて、どこからでも使えるようにしたい。Webpackerで入れる方法と、昔ながらのassetsを使う方法があります。 W...

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

コメント

タイトルとURLをコピーしました