Scss changes not live reloading

support
1

Hello, I have these files in my < head >, and they’re working fine… the problem is that whenever I make changes to my scss files then I need to stop and start the hugo server…

{{ $layout := resources.Get "sass/layout.scss" | resources.ExecuteAsTemplate "css/layout.css" . | toCSS }}
{{ $newsletter := resources.Get "sass/newsletter.scss" | resources.ExecuteAsTemplate "css/newsletter.css" . | toCSS }}
{{ $home := resources.Get "sass/home.scss" | resources.ExecuteAsTemplate "css/home.css" . | toCSS }}
{{ $styles := slice $layout $newsletter $home | resources.Concat "styles.css" | minify | fingerprint }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" {{ printf "integrity=%q" $styles.Data.Integrity | safeHTMLAttr }}>

I’ve tried running hugo server with various parameters, such as hugo server -w -v -e --forceSyncStatic, but no matter what parameters I try with, then the page doesn’t refresh on scss changes, and even if I manually refresh then the css doesn’t update before I stop and start the hugo server command again.

Any help would be much appreciated :slight_smile:

2

The --forceSyncStatic won’t help you with stuff that happens in Pipes. I have the same experience and sometimes my sites recreate and sometimes they don’t. Not sure what the difference is.

When you run hugo server it somewhere says something along the lines “Watching folders A, B and C”. Are your sass files in one of these folders?

3

Thanks for the reply. The files are located under assets/sass, when I change the .scss files then it says:

INFO 2020/06/20 16:38:01 Received System Events: ["/home/myusername/pathtomyproject/myproject/assets/sass/home.scss": WRITE "/home/myusername/pathtomyproject/myproject/assets/sass/home.scss": WRITE]

But nothing happens. The browser page doesn’t auto-refresh, and if I try to manually refresh the page then it’s still using the old stylesheet (even with Disable Cache enabled in the browser). Only way to display the changes is to restart hugo server

4

Is the browser console saying anything? I would expect one of two things: a file not found or can't connect to livereload error.

5

What Hugo version are you running?

I say this because I improved on this at some point.

The thing is, when a file inside /assets changes there is a strategy for what parts of the cache gets invalidated (some cases everything) – in the SASS/SCSS we, if my memory serves me correct, flushes everything below /scss and /sass. So, if you store your SCSS files below /foo that will not work as expected on server reloads.

I do agree that I need to improve the above, but it has worked rather nicely for me at least.

6

if my memory serves me correct, flushes everything below /scss and /sass. So, if you store your SCSS files below /foo that will not work as expected on server reloads.

Let’s put that into the docs? (as in “I would do that task”)

7

Nope, but the live reload also work when I change the layout and content files (although still using the original css that was generated the first time hugo server was run), it’s only changes to the scss that doesn’t trigger the refresh browser.

Hugo Static Site Generator v0.73.0-DEV/extended linux/amd64

I think I’m misunderstanding you, but I tried to move all the .scss files out of the sass folder and placed them directly in the assets folder, but it still have same problems.

8

No no, he is saying having them in the scss or sass folder should result in a re-create when you change files inside (other folders might fail). I just checked my files and I have scss files in the sass folder. It should create your css file on changes.

Try naming your files *.sass when they are in the sass folder and naming them *.scss when they are in the scss folder… I’ll have to check my sites, but I think I had an issue with that a while back.

9

Ahh okay, just tried renaming the folder to scss (so full path is /assets/scss/layout.scss), but it generated stylesheet doesn’t update.

For instance, when I run hugo server then it generates e.g.

<link rel="stylesheet" href="/styles.min.a4daa4345f4574b62057c67b9ed0f9caed57f1c289b99d00106c0e687021bf51.css" integrity="sha256-pNqkNF9FdLYgV8Z7ntD5yu1X8cKJuZ0AEGwOaHAhv1E=">

After making changes to a .scss file (as well as a html file to force the browser to refresh) then the generated stylesheet remains the same.

It only changes after stopping and starting hugo server.

10

No, that does not matter.

11

OK, digging into my memory.

The idea behind this that

  1. We want to avoid rebuilding the CSS if you change a JS file.
  2. And since we don’t have a “SASS dependency graph” available, we assume that everything below /sass or /scss belongs together needs a rebuild if any of the files changes.

The rule is rather simple:

We use the file extension (*.js, => /js, *.css => /css etc.), but with an added mapping for scss vs sass:

12

Not sure if it helps, but if I only use 1 scss file, then it works as intended (css update, browser refreshes), e.g.

{{ $test := resources.Get "scss/test.scss" | minify | fingerprint | toCSS }}
<link rel="stylesheet" href="{{ $test.RelPermalink }}" {{ printf "integrity=%q" $test.Data.Integrity }}>

Although it only works if safeHTMLAttr is removed.

I tried removing safeHTMLAttr from the original as well, but that didn’t work… so I’m guessing it might be related to the slice? I mean maybe

{{ $styles := slice $layout $newsletter $list $home | resources.Concat "styles.css" | minify | fingerprint }}

Doesn’t update $styles when $layout, $newsletter, $list, or $home is changed, and thus

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" {{ printf "integrity=%q" $styles.Data.Integrity }}>

doesn’t update because $styles never changed? Just a thought.

13

Hmm. I can get it working with slices by sacrificing minification and integrity. For instance, this works:

{{ $test1 := resources.Get "scss/test1.scss" | minify | fingerprint | toCSS }}
{{ $test2 := resources.Get "scss/test2.scss" | minify | fingerprint | toCSS }}
{{ $test := slice $test1 $test2 | resources.Concat "test.css" }}
<link rel="stylesheet" href="{{ $test.RelPermalink }}">

It also made me realize that minify and fingerprint is pointless for the variables used in the slice, so might as well just write

{{ $test1 := resources.Get "scss/test1.scss" | toCSS }}
{{ $test2 := resources.Get "scss/test2.scss" | toCSS }}
{{ $test := slice $test1 $test2 | resources.Concat "test.css" }}
<link rel="stylesheet" href="{{ $test.RelPermalink }}">

Still haven’t figured out how to get it working with minify and integrity since

{{ $test1 := resources.Get "scss/test1.scss" | toCSS }}
{{ $test2 := resources.Get "scss/test2.scss" | toCSS }}
{{ $test := slice $test1 $test2 | resources.Concat "test.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $test.RelPermalink }}" {{ printf "integrity=%q" $styles.Data.Integrity }}>

Means that although it works, it doesn’t detect changes or refreshes without restarting hugo server.

14

I’m having the same issue.
Have you solved this problem yet?
I find that if you place scss files under <path/to/your/project>/themes/assets/scss/example.scss, it will automatically re-compile scss and show changes in your browser.
However, things will not work if scss files are under <path/to/your/project>/assets/scss/example.scss