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?
<figcaption>https://github.com/rails/rails/pull/33079#issuecomment-400273182</figcaption></figure> 
<figcaption>https://github.com/rails/rails/pull/33079#issuecomment-400759113</figcaption>
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:
<figcaption>https://medium.com/@adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f</figcaption></figure>
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:
<figcaption>https://github.com/rails/webpacker#paths</figcaption></figure>