Cuộc sống Nhật Bản
Yuto Blog

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

Webpackerのインストール

Copy Gemfile
1
gem "webpacker"

bundle install

Copy
1
rails webpacker:install
Bootstrapの導入
Copy
1
yarn add bootstrap@4.3.1 jquery popper.js
Copy webpacker/environment.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
Copy app/javascript/packs/application.js
1
2
3
4
import "bootstrap"
import "../src/application.scss"

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

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

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

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

Copy app/javascript/packs/application.js
1
2
3
import $ from "jquery";
global.$ = jQuery;
この記事はQiitaのマイページにも掲載しました。
Updated by Yuto at 2023-05-09 21:05
Rate this article: 5/5 (55 ratings)
You didn't rate yet
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.