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…
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.
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?
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
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.
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”)
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.
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.
We want to avoid rebuilding the CSS if you change a JS file.
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:
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