If you enjoy this article you may be interested in the book I am working on called Building and Deploying Crypto Trading Bots.
Since the release of Rails 6, there have been some changes made to default tools for asset compilation. In specific sprockets
no longer processes JavaScript and instead uses webpack
as the default configuration. Following the philosophy of "convention over configuration", the current "Rails way" is understood to be: use webpack
for JavaScript and sprockets
for everything else.

This does change how common CSS frameworks like Bootstrap are added to a Rails project. For example, the twbs/bootstrap-ruby
gem is no longer as helpful because sprockets
is not used for compiling assets. So we need another way.
Steps
- Install Bootstrap via
yarn
yarn add bootstrap@4.5.0 jquery popper.js
Since jquery
was removed from Rails as a dependancy approx. around Rails 5 in favour of rails-ujs
, we will need re-add it to use Bootstrap. We use yarn here because we will packaging these JavaScript dependencies using webpack
.
2. Update config/webpack/environment.js
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
Now that webpack
is processing our JavaScript, we need to make it aware of the libraries installed via yarn. We can do this via the ProvidePlugin to automagically, "load modules instead of having to import or require them everywhere."
3. Update app/javascript/packs/application.js
// Other impots
import 'bootstrap'
Finally, we need to directly import our bootstrap
library in the main application.js
JavaScript file.
4. All Webpack Method
The Rails community is somewhat divided on whether to use webpack
for everything or use the combination of sprockets
/ webpack
. For those whom sprockets
has caused heart burn in the past the all webpack
method may be much more desirable
4a. Co-locating CSS and JavaScript:
You can co-locate your CSS, and images by putting them in the same directory. Add a stylesheets
folder with application.scss
to your javascript/packs
# app/javascript/packs/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap"; // never forget the semicolon at the end
@import "./_custom";
# app/javascript/packs/stylesheets/_custom.scss
h1 {
color: red;
}
4b. Including Asset Pipeline in Webpack
This avenue lets you keep your CSS, images and styling separate from your javascript.
Update the config/webpack.yml
to include the app/assets
directory in resolved_paths
resolved_paths: ['app/assets']
You will then need to manually import your style sheets into your app/javascript/packs/stylesheets/application.scss
// app/assets/stylesheets/home.css
h1 { color: green; }
// app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap"; // never forget the semicolon
@import "./_custom";
@import "stylesheets/home";
4. Webpack & Sprockets
If you want to stay course and continue the Basecamp Rails way the current convention is to continue using sprockets
for processing stylesheets and images.
- Add to
app/assets/stylesheets/application.css
:
// if .scss
@import "bootstrap/scss/bootstrap";
// or if .css
*= require bootstrap/scss/bootstrap
To add Bootstrap you need to import the bootstrap library via scss
imports or a sprockets
require directive in.
That should be it - have fun bootstrapping your next project!
References
https://github.com/rails/webpacker/blob/master/README.md
https://medium.com/@adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f
https://www.timdisab.com/installing-bootstrap-4-on-rails-6/