Rails 7 With Webpacker and Bootstrap

So Rails 7 officially wants to kill Webpacker, the very common CSS and JS preprocessor. In particular, it wants to favor importmap-rails.

Remember, you can import CSS using only Sprockets, and in Rails 7 that’s now the preferred way to import CSS/

If that’s not you, you need to follow these instructions to use Webpacker with Rails 7:

These instructions get you going with the popular Bootstrap library.

Make sure you have the Rails 7 gem:

% rails -v     
Rails 7.0.0.alpha2          

Start with a new Rails 7 app:

rails new MyGreatApp --pre

  1. Add gem 'webpacker' to your Gemfile
  2. Add or enable gem 'sassc-rails' in your Gemfile
  3. run rails webpacker:install
  4. in webpacker.yml change source_path: app/javascript to source_path: app
  5. `extract_css: false` to extract_css: true`

  6. – create a folder at app/javascripts/packs
    – make a enw file in this folder `load_bootstrap.js` which contains only:
    – `import ‘../require_bootstrap.scss’`
    – make a new file at `javasript/reuqire_bootstrap.scss` which contains only:
    – `@import “~bootstrap/scss/bootstrap.scss”;`
    – in `application.erb` remove the javascript_maptag and replace the `stylesheet_load_tag` with
    <%= stylesheet_pack_tag “application”, “data-turbo-track”: “reload” %>
    <%= javascript_pack_tag ‘load_bootstrap’, ‘data-turbolinks-track’: ‘reload’ %>