But what about CSS ?
Well there is good old Sprockets (a.k.a Rails asset pipeline) and good old gems contanining SCSS (remember those?)
Let’s make life easy again
Instalation of Bootstrap 5 in Rails 7
If you don’t have importmaps yet in your Rails project:
# to check if you already have importmaps $ cat config/importmap.rb # to install importmaps in your Rails7 project $ rails importmap:install
To add Bootstrap 5 JS to Rails 7 project via importmaps:
$ bin/importmap pin bootstrap
…this will add necessary JS (bootstrap and popperjs) to
Then you need to just import bootstrap in your
For some reason popperjs acts broken in my Rails7 project when I load it from default
ga.jspm.ioCDN. That’s why I recommend to load it from
# config/importmaps.rb # ... pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js" pin "@popperjs/core", to: "https://unpkg.com/@popperjs/[email protected]/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package # ...
To install official Bootstrap 5 Ruby gem
# Gemfile # ... gem 'bootstrap', '~> 5.1.3' # ...
Then just edit your
// app/assets/stylesheets/application.scss // ... @import "bootstrap"; // ...
note: be sure you replace your application.css with application.scss. That means
app/assets/stylesheets/application.cssshould not exist!
If you want to change some variables:
// app/assets/stylesheets/application.scss // ... $primary: #c11; @import "bootstrap"; // ...
Make sure your layout (
- you can use the
rails new --css bootstrapoption but that will require
esbuildwhich requires all the JS shenanigans in your laptop this article wants to avoid
- you can use webpacker but again you need node,yarn,… So, have fun
“but this way you load a gem and you don’t use the JS bit of it”
So what? Like if there’s no single gem in your project you don’t use at 100%. I love “vanilla Rails” approach and love to avoid 3rd party gems as much as I can but this will save you so much hustle, especially if you are a beginner new to Rails or you are starting a sideproject (there’s always a time to refactor if you really need to)
“but Sprockets are no longer used”
Yes they are. There was a period of time with RoR 5.2 & 6.x where webpacker was taking over and developers were ditching Rails asset pipeline but this new importmaps approach is fresh breath to bring gems with scss back.
Basecamp (& DHH) were quite clear about it that Sprockets will not
disappear anyday soon.
But still Sprockets are the most convinient way how to use CSS in Rails7
what about DartSass
if you decide to configure DartSass Rails go for it.
--css(esbuild) is there to replace sprockets
No it’s not, same way how webpacker didn’t replace it
But what if CDN provider goes down, then my application JS will not work
Yes you and other billion websites as well. If your project is a bank then yeah sure use your own CDN or load from vendor. But if your project is startup to sell T-shirts then I’m pretty sure everyone will survive that 5 min downtime.
Photo by Pablo Arroyo via unsplash
Entire blog website and all the articles can be forked from this Github Repo