Webpacker: Weirdness of stylesheet_pack_tag target and importing SCSS

[MrSkinny]

Hi! Although I have the setup working, I don't understand what's going on and would love some clarification:

The README says to structure as below assuming you have various modules you want to pull in via the javascript_pack_tag

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── foo-module.js
  │   └── foo-module.css
  └── images:
      └── logo.svg
  └── foo-module:
      └── styles:
          └── index.scss
      └── index.js

Now I want to use SCSS for my style sheets. My understanding with Webpack's loader is that you want to import your SCSS entry file from your JavaScript, e.g.

import './styles/index.scss';

So I've done this in foo-module/index.js. In my HTML I have:

    <%= javascript_pack_tag 'foo-module' %>
    <%= stylesheet_pack_tag 'foo-module' %>

And it works! Everything in styles/index.scss and its imports are compiling.

But if I remove the stylesheet_pack_tag it stops working, even though it's pointing to that empty foo-module.css. If I remove the foo-module.css from the packs directory, it stops working. But I'm at a loss as to what purpose this empty file is doing. Any styles I place in there do not appear to be compiled.

I get that the stylesheet_pack_tag needs to generate a <link> which is pointing to the transpiled css, which is coming from the JavaScript's imported index.scss. But it seems unintuitive that the only way it can do that is by pointing to an empty css file?

[renchap]

A pack file needs to be a JS file. You can remove your packs/foo-module.css file. If a CSS (or SCSS) file is a dependency (import, direct or indirect) of packs/foo-module.js then a foo-module.css file will be created by webpack and you will be able to include it using <%= stylesheet_pack_tag 'foo-module' %>

Note: if you are using HMR, the CSS file is not generated in development (and stylesheet_pack_tag will output nothing).

[MrSkinny]

Thanks @renchap. I was certain I deleted packs/foo-module.css and got a stylesheet_pack_tag error at some point while setting this up, but I just did as you said, and everything still compiled fine. There must have been something else wrong in the tree somewhere that I didn't notice at the time. Thanks for clarification on JS only in the packs dir.