Rails+WebpackerでBootstrap4を入れる方法

背景

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です。

参考