As many other people in the Rails community, I started setting up brand new Rails 7 projects, and I need to re-learn, at least partially, how to bundle the assets and distribute them.
I never fell in love with TailwindCSS, and therefore I usually setup my Rails apps to use Bootstrap as default.
I have to say that
esbuild does already a pretty cool job compared to
webpack to simplify our lives, and make the process faster, but as long as I don't need bundling, I'd like to not have a package.json file and being dependent on nodejs for my Rails app.
A pure and simple sprockets + importmaps app with no Foreman, no
yarn build --watch stuff.
By default, Rails 7 provides a new option
but with my great surprise, this option adds both
Not as expected. Not what I want.
Default is not what I want, but I can still reach the goal and here I'll explain how:
Stick with just
rails new myapp
This will setup exactly the tools I want:
importmaps. It will also setup automatically for me stimulus and turbo, which is great because I use them most of the time anyway.
bootstrap gem and enable the gem
sassc-rails in the Gemfile. This will allow us to compile bootstrap from SCSS without node.
You can simply import Bootstrap styles in
// here your custom bootstrap variables... @import "bootstrap";
That's it for the CSS part. Running
rails assets:precompile will generate what you want.
- Precompile the bootstrap.min.js that comes with the gem, by adding to
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
- pin the compiled asset in
pin "popper", to: 'popper.js', preload: true pin "bootstrap", to: 'bootstrap.min.js', preload: true
- Include bootstrap in your
import "popper" import "bootstrap"
I prefer this approach rather than pinning a CDN because we avoid diverging versions of Bootstrap.
This is all you need to have Bootstrap fully working on Rails 7 without using node.
If you like this guide you can follow me on Twitter.