I was confused as to why there is a dual system running on, there might be reasons for that but let's fix this situation by only using Webpacker to generate our assets.

Unlike the webpack config, webpacker.yml settings are determined by the current RAILS_ENV.

All this to say: your webpack test config, i.e. config/webpack/test.js, is essentially useless unless your application: a. uses a Node.js test runner for JavaScript unit test AND configure it to use your webpack config a. overrides the defaults so that the test config is loaded in your Rails tests (just be sure to change Babel behavior)

It would be safer to just register the JS entrypoints and automatically add CSS packs if there are any required by that JS. Webpacker does this already. Check your webpacker.yml and ensure that extract_css is false. This will prevent webpacker from separating the 2 files.

if I reference a stylesheet in a JS pack application.js but DON'T include <%= stylesheet_pack_tag 'application' %> in my .html.erb file, then those styles will not be applied? Correct, unless you are using webpack dev server, in which case the CSS will be inlined with JS.

I don't have anything to add other than "extract_css" in webpacker.yml has been a source of confusion for me as well. When it is "extract_css: false" in development and production, a stylesheet IS included in the document head (shouldn't this be "extract_css: true"?). And when I use "extract_css: true", styles are not included in the document.

You probably have extract_css: true in your webpacker.yml. This removes import '../scss/index'; and generates the equivalent style sheet. You do need to add stylesheet_pack_tag yourself.

(if extract_css == true) -> application stylesheet -> MiniCssExtractPlugin -> application.css -> stylesheet_pack_tag 'application' (if extract_css == false) -> application stylesheet -> style-loader -> application.js (loads css in head)

When you do import '../src/application.css', you're telling webpack include application.css in the build. This does not mean it's going to be compiled into your javascript, only that webpack now knows that you want to compile this file. How that file compilation is handled is depending on how your loaders (css-loader, sass-loader, file-loader, etc.. ) are configured.