index.{scss,sass} files not handled in imports

[martinjagodic]

Hot reload does not work properly when changing files in assets sub-subfolders (eg, assets/styles/components/_container.scss). The server detects a change, but new styles are not applied.

If you change a file that triggers the rebuild correctly, assets from subfolders also trigger it correctly from that point on.

Minimal reproduction repository: https://github.com/martinjagodic/hugo-sass-debug

What version of Hugo are you using (hugo version)?

$ hugo version
v0.139.3+extended+withdeploy darwin/arm64 BuildDate=2024-11-29T15:36:56Z VendorInfo=brew

Does this issue reproduce with the latest release?

Yes. The bug started in v0.123.0 but is still present in v0.139.3. Tested only with hugo extended.

[bep]

A workaround may be to set up some cache busting config, see https://gohugo.io/getting-started/configuration-build/#configure-cache-busters -- e.g.:

[build]
  [[build.cachebusters]]
    source = 'assets/.*\.(scss|sass)'
    target = 'css'

[bep]

I had a quick look at the repo, and the reason that particular repo does not work is that Hugo's custom import resolver does not currently resolve index.scss files. If you rename that file to _index.scss things start working.

[martinjagodic]

@bep thank you!! I don't even want to think about how many hours we wasted debugging this 😅 I can confirm that both your solutions work. I opted for build.cachebusters because adding _ to the index file defies all purpose of the underscore.