【Rails6】WebpackerによるBootstrap導入

#　はじめに
この記事ではWebpackerによるBootstrapの導入方法を説明します。

bootstrap, jQuery, popper.jsのインストール

　ターミナル上で以下のコマンドを実行する。

yarn add jquery bootstrap popper.js

　　
これによって、
package.jsonファイルに次の３行追加される。

package.json

"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",

Bootstrapを利用できるようにする

app/javascript/packs/application.jsに、
以下の２行を追加する。

app/javascript/packs/application.js

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

　　
新しいディレクトリ、ファイルを追加する。
まずは以下のコマンドでapp/javascriptにstylesheetsディレクトリの作成。

mkdir app/javascript/stylesheets

　　
app/javascript/stylesheetsにapplication.scssファイルを作成。

touch app/javascript/stylesheets/application.scss

　　
次はapp/javascript/stylesheets/application.scssに
以下のコードを追加する。

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

jQueryとPopper.jsを利用できるようにする

次にapp/config/webpack/environment.jsを修正。

app/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', 'default']
  })
)
//ここまでを追加。

module.exports = environment

　　

レイアウトを修正する

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

app/views/layouts/application.html.erb

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

　　
これでbootstrapが利用可能になります。

　　

注意点

bootstrapのドキュメントを参考にする場合はバージョンにあったものを使用すること。でないとjQueryが動かない場合がある。

参考にした記事