Changes to Sass stylesheets are not reflected in the browser via live reload

[dwhweb]

Hey there,

Firstly, for reference, I’m running Arch and running hugo v0.125.1+extended linux/amd64 BuildDate=unknown

I’m having issues where changes to the underlying Sass stylesheet(s) are picked up by Hugo and a live page refresh is triggered but the changes don’t seem to be reflected in the compiled css. However, as soon as I kill the server and restart it, the changes are there. I’ve built and published a fairly rudimentary site in Hugo before and I don’t recall this being an issue last time.

I’ve put an example repository on Github here to illustrate the issue, but the basic steps to reproduce are —

1. Create a new site with hugo new site sasstest --format yaml
2. Create a new theme with hugo new theme sasstest_theme
3. Add theme: sasstest_theme to hugo.yaml
4. Create /sasstest/themes/sasstest_theme/assets/scss/index.scss with the contents

h1 {
  color: red;
}

5. Add lines to compile the Sass to CSS in the partial sasstest/themes/sasstest_theme/layouts/partials/head.html —

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ $stylesheet := resources.GetMatch "scss/index.scss" | resources.ToCSS | fingerprint }}
<link href="{{ $stylesheet.RelPermalink }}" rel="stylesheet" />
{{ partialCached "head/css.html" . }}
{{ partialCached "head/js.html" . }}

6. Start the server with hugo server --disableFastRender --logLevel info, load the page in Firefox
7. Change /sasstest/themes/sasstest_theme/assets/scss/index.scss, i.e.

h1 {
  color: blue;
}

Console gives output similar to the following —

Asset changed /scss/index.scss
INFO  build:  step process substep resolve page output change set changes 1 checked 29 matches 10 duration 501.271µs
INFO  build:  step process substep gc dynacache duration 292.729µs
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
INFO  build:  step process duration 1.005341ms
INFO  build:  step assemble duration 420ns
INFO  build:  step render substep pages site en outputFormat html duration 3.925406ms
INFO  build:  step render substep pages site en outputFormat rss duration 366.629µs
INFO  build:  step render pages 10 content 10 duration 4.604185ms
INFO  build:  step postProcess duration 22.974µs
INFO  build:  duration 5.832446ms
Total in 5 ms

The change to the header is not reflected until you kill the server and reload the page. This doesn’t appear to be a browser cache issue, as forcing a hard refresh in Firefox with Ctrl-Shift-r doesn’t help and my browser doesn’t retain it between restarts, which I’ve also tried.

The appended fingerprint on the CSS filename doesn’t change between reloads until you kill the server so the page is clearly using the old CSS but I’m not clear on why new CSS isn’t generated and used if Hugo is clearly picking up the scss change as pointed out in the console?

I’ll note that I am aware there are several threads on the forum with similar issues but none of the suggestions seemed to help being mostly fairly old and some being Windows specific.

I’m not really sure what I’m missing here, and any pointers would be greatly appreciated, thanks in advance

[jmooring]

Minimal reproducible example:

git clone --single-branch -b hugo-forum-topic-49365 https://github.com/jmooring/hugo-testing hugo-forum-topic-49365
cd hugo-forum-topic-49365
hugo server

While the server is running, edit themes/sasstest_theme/assets/scss/index.scss, changing h1.color from red to blue. The site title should change from red to blue.

See https://github.com/gohugoio/hugo/issues/12395.

[dwhweb]

Ah, so this is a bug, thanks for checking it out for me.

I’ve downgraded to v0.122.0 in the meantime, thankfully it was still in my Pacman cache.

Thanks again

[jmooring]

This has been fixed in the next release.