LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

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

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;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2