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

jQuery Ruby on Rails

Posted by Yuto Yasunaga at 2020-08-23 20:12:54 +0900

Webpackerのインストール

Gemfile
gem "webpacker"

bundle install

rails webpacker:install

Bootstrapの導入

yarn add bootstrap@4.3.1 jquery popper.js
webpacker/environment.js
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
app/javascript/packs/application.js
import "bootstrap"
import "../src/application.scss"

require("jquery")
app/javascript/src/application.scss
@import "~bootstrap/scss/bootstrap";
app/views/layouts/application.html.slim
html
  head
    == javascript_pack_tag "application"
    == stylesheet_pack_tag "application"

Webpacker導入後、data-remoteやdata-confirmが動かなくなった場合

yarn add rails-ujs
app/javascript/packs/application.js
import Rails from "rails-ujs";
Rails.start();

Webpacker導入後、*.js.erbファイルが動かなくなった場合

app/javascript/packs/application.js
import $ from "jquery";
global.$ = jQuery;

Back