Install using yarn
$ yarn add jquery@3.5.1 bootstrap@4.5.0 popper.js@1.16.0
>> Next, set to read jquery.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
module.exports = environment
>> Next, set the Bootstrap CSS to be loaded.
Create a stylesheets directory under app/javascript . Create an application.scss file under it and write the following code.
[app / javascript / stylesheets / application.scss]
@import '~bootstrap/scss/bootstrap';
>> Next, set to read JS of Bootstrap.
Add the following code to app/javascript/packs/application.js.
[app / javascript / packs / application.js]
import 'bootstrap';
import '../stylesheets/application';
>> Finally, change link to pack app/views/layouts/application.html.erb as follows.
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>