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
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
And then apparently this also means something: