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
app/javascript/packs/application.js
1
2
| import Rails from "rails-ujs";
Rails.start();
|