Spread the love

Loading

Rails 6 follow webpacker, you don’t need to install a gem, do this instead

In your Rails home directory, run this command, to install jQuery, popper.js and bootstrap, jQuery and popper.js are dependencies of bootstrap.

yarn add bootstrap jquery popper.js

Then add this to your config/webpack/environment.js

const { environment } = require('@rails/webpacker') // already present

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment // already present

Then create a folder named src inside app/javascript/packs and then create application.scss file inside the newly created src folder

Add this line in the newly created application.scss file

@import '~bootstrap/scss/bootstrap';

And finally in app/javascript/packs/application.js file, add this

import 'bootstrap'
import './src/application.scss'

Check by running following:

bin/rails assets:clobber  
$/***app> bin/rails webpacker:compile  
$/***app> bin/rails server  

Restart your server by running following command:

rails s -b 0.0.0.0 -p 3000

Then check web pages to see if bootstrap styling is in use.

Written by Michael Zhang

Leave a Comment

Your email address will not be published.