Rails 6 ships with webpacker by default for javascript only. Sprockets will still be used for css.

Why would we want to use webpacker for css?



I think the main benefit may be Hot Module Reload (HMR), which is different to Hot Live Reload. Hot Live Reload means a full page refresh occurs on file change. HMR avoids the full page reload.

Why wasn’t webpacker used for css by default?


How do we use webpacker for css?

I believe there are two different ways to use webpacker for css, however, with both approaches you must set extract_css: true in webpacker.yml. I also believe you should use the stylesheet_pack_tag helper in your layout/view.

The two approaches:

1. Add a .scss file to your /packs directory

For example:

// app/javascript/packs/applications.scss <br>@import '../src/stylesheets/our_test.scss';

2. Import you css in your javascript pack

For example:

// app/javascript/packs/applications.js<br><br>import "../src/stylesheets/application"

The stylesheet_pack_tag

Both of the above solutions would use <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

In my experience I needed to use that helper. However, I have also read that it’s not needed:


What was this talk of HMR?

After you’ve setup your css to go through webpacker, I believe to enable Hot Module Reloading, all you need to do is set hmr: true in webpacker.yml

And then apparently this also means something: