This post is a video summary post from Chris Oliver at GoRails.com. In this video, Chris walks through using esbuild and CSSBundling with Bootstrap in Rails 7. I found this super helpful when getting started with Rails 7 in a webpacker-less life.
To get thing started off, run this command in the terminal (replacing
[app_name] with the name of your app for testing):
rails new [app_name] -j esbuild --css bootstrap
--css flag specifies the CSS framework you want to use.
package.json file contains two new additions:
- sass command that compiles the bootstrap css file
procfile.dev file is the new way of running your Rails app with CSS and jsbunding (runs
Now, instead of just running the rails server all by itself, all three of the commands found in the Procfile will run at the same time. This is accomplished by running
bin/dev instead of
App > Assets > Stylesheets > application.bootstrap.scss imports bootstrap (standard sass import)
The Builds directory is the final directory where the js files will be housed.
In the terminal, running
yarn run build:css runs the sass command that will compile the CSS file. It outputs the file to the
App > Assets > Builds folder as
application.css. Open the file and take a look–all of the CSS has been compiled and included in this file.
Checking Boostrap Compilation
As a bit of final “testing”, the
viewport meta tag is added so that the browser can share its breakpoints in order for the CSS responsiveness to kick in.
- Bootstrap: https://www.getbootstrap.com
- CSS Bundling Rails gem in Rails repo: https://www.github.com/rails/cssbundling-rails