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)