Concat sass not refreshing in Hugo Server

support
1
  1. I am trying to work with sass in my project. I have several different sources and would like to Concat them as a single file. I noticed that hugo server does not reload when I make changes to any of these sass files. However when they are not concatenated it works as expected.

Command
hugo server --disableFastRender

Code snippet

{{ $aCSS := resources.Get “style/a.scss” | resources.ToCSS}}
{{ $bCSS := resources.Get “style/b.scss” | resources.ToCSS}}
{{ $cCSS := resources.Get “style/c.scss” | resources.ToCSS}}
{{ $mergedCSS := slice $aCSS $bCSS $cCSS | resources.Concat “css_bundle.css” | resources.Minify | resources.Fingerprint “sha256” }}

{{ $soloCSS := resources.Get “style/solo.scss” | resources.ToCSS}}

Repo demonstrating the problem

Info
MacOS Catalina 10.15.4 (19E287)
hugo version
Hugo Static Site Generator v0.69.2/extended darwin/amd64 BuildDate: unknown

  1. I expected changes in any sass file to be reflected in browser immediately.

  2. Sass files which are concatenated do not work. However those that are used individually do work.

2

Maybe you can try with --disableFastRender ?

3

Yes, I tried with that command. The sass files that grouped together don’t refresh (a.scss, b.scss, c.scss). However changes to solo.scss does refresh the browser.

4

I’m sure you’ve tried ctrl + F5 (refresh) in browser? Does a manual refresh work? Or is Hugo seemingly not updating concatenated files?

5

Try to put the source files below /scss or /sass … Yes I understand that this is a little limited/hidden/surprising – but I implemented cache invalidation using prefixes …

6

@bep thanks for the suggestion! I tried changing the dir name to scss. However updates to /assets/scss/{a,b,c}.scss are still not automatically shown in browser (/assets/scss/solo.scss works). I am not sure if you meant /scss at the root of the project dir. I tried this also with /scss/top.scss but I get an error when trying to use {{ $topCSS := resources.Get “scss/top.scss” | resources.ToCSS}}

I’ve updated my sample repo to show what I’ve tried.

Is this the way you suggested to structure the scss source files or am I missing something?