Hugo server not rebundling and reloading Sass/SCSS when files are changed

support
1

I’m new to using Hugo, and I’m taking over an existing project. Currently, I’m migrating our CSS to Sass and I’m can’t get Hugo to rebundle the Sass automatically when running hugo server. It works fine when I stop and start the server, but it won’t detect changes to the Sass files and rebundle them.

I have set up the Sass assets according to the docs. The scss files live inside themes/<myTheme>/assets/sass/. In the HTML head I have this code to process and add the styles:

{{ $sass := resources.Get "sass/main.scss" }}

{{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed" "enableSourceMap" true ) }}

{{ $style := $sass | resources.ToCSS $options | fingerprint}}

With this setup, the styles are being processed and loaded fine when I run hugo server . However, when I make changes to an scss file, the css file is not updated. I have to start and stop hugo server every time I make a change in order to see it reflected in the browser. I have tried various option flags for hugo server, but so far no luck. I’m hoping there is some magic trick to make this work.

I’m using hugo 0.87 extended.

2

I figured out an answer to the problem. I had been running hugo from the Linux command line using WSL. I just installed Hugo on Windows and ran hugo server there. Now it is detecting the Sass changes and rebuilding no problem.

1 Like
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.