Rails 7 no longer comes by default with Webpacker, the very common CSS and JS preprocessor that bridges Rails to the NPM + Node ecosystem of building apps with webpack.
However, if Webpack is your cup of tea, here’s how to bring it back into a Rails 7 app.
These instructions get you going with the popular Bootstrap library.
Make sure you have the Rails 7 gem:
% rails -v Rails 7.0.1
Start with a new Rails 7 app:
rails new MyGreatApp --pre
Step 1: Remove ImportMap and replace it with Webpacker
gem 'webpacker'to your Gemfile
- remove ‘importmap-rails gem from the Gemfile
Step 2: Enable Sass
gem 'sassc-rails' in your Gemfile. Alternatively you can use
Step 3: Install Webpacker
extract_css: false to
Step 4: Create a New Pack, Import Bootstrap through Any File, and then SCSS Import Bootstrap
– create two new folders one inside the other at
– make a new file in this folder
This will be the primary manifest for our app. In
app/views/layouts/application.html you will want to remove this line:
And replace it with:
Step 5: Switch
Delete this file:
Now make a new empty file called
application.scss in the same folder
Step 6. Add Bootstrap gem
To Gemfile, add
gem 'bootstrap', '~> 5.1.3'
Also, in the application.scss file, add this:
Step 7. Add
.scss to Asset Precompilation
Go to config/initializers/assets.rb
We want to uncomment and change this line:
Rails.application.config.assets.precompile += %w( application.scss )
Notice that we do not have to make any changes to our application.html.erb, which by default looks as below. This is handy and happens because the
stylessheet_link_tag just references the
stylesheet file without the extension type, which means it picks up the SCSS instead of the CSS file when we switched it from one to the other.
No changes here.
Step 8. Make a Fake Articles Controller & Route
Create the articles controller with:
rails generate controller Articles
Add an empty def index to it:
class ArticlesController < ApplicationController def index end end
in config/routes.rb, uncomment this line:
And finally, create a Hello World file at app/views/articles/index.erb
Does it work?
Well, now you might hit an infamous Webpacker load problem that looks like this: