Step 1: Using Yarn:
yarn add bootstrap@4.3.1 jquery popper.js
package.json file should look like this
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0"
},
Step 2: Head to config/webpack/environment.js file and add these lines
const { environment } = require('@rails/webpacker')
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
Step 3 : Head to app/assets/stylesheets/application.css and add these lines
*= require bootstrap
*= require_tree .
*= require_self
Top comments (3)
Just a little addition to the steps. You also need to add
import "bootstrap"
to app/javascript/packs/application.js
The last part result in an error. You sure is the format correct?
The top of
app/assets/stylesheets/application.cssshould look like this: