背景
railsではBootstrapをwebpackerを使って入れるとのことだったので、試してみました。
やり方
Gemfileに追加
# webpacker
gem 'webpacker', '~> 4.0'
Dockerを使ってbuildし直す
ターミナルでwebpackerのインストール
$rails webpacker:install
yarnコマンドでjQueryやbootstrapをインストール
$yarn add jquery bootstrap popper.js
config/webpack/environment.jsに以下を追加
const { environment } = require('@rails/webpacker')
module.exports = environment
// ここから
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
}
// ここまで
app/javascript/stylesheets/application.scssを新規作成し、追加
@import '~bootstrap/scss/bootstrap';
app/javascript/packs/application.jsに以下を追加
import 'bootstrap';
import '../stylesheets/application';
app/views/layouts/application.html.erbに以下を追加
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
あとは、bootstrapのクラスを当ててみて、動作すればOKです。
参考