はじめに
この記事では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が動かない場合がある。