【Ruby on Rails】WebpackerでBootstrap、jQueryを導入方法

1
gem "webpacker"

1
rails webpacker:install

1
yarn add bootstrap@4.3.1 jquery popper.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { environment } = require('@rails/webpacker')

// ↓↓↓
const webpack = require('webpack')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)
// ↑↑↑

module.exports = environment

1
2
3
4
import "bootstrap"
import "../src/application.scss"

require("jquery")

1
@import "~bootstrap/scss/bootstrap";

1
2
3
4
html
  head
    == javascript_pack_tag "application"
    == stylesheet_pack_tag "application"

1
yarn add rails-ujs

1
2
import Rails from "rails-ujs";
Rails.start();

1
2
3
import $ from "jquery";
global.$ = jQuery;