I'm pretty new with Hugo and am struggling a bit with the documentation as it feels pretty fragmented with incomplete examples.
I've created a new site hugo new site site-name along with a new theme hugo new theme theme-name.
In the documentation page for SASS/SCSS there's the following example:
{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}
Not sure where that's supposed to go, how the whole pipeline works. Also, this seems to be specifically looking for files under an assets folder even though the theme is created with a static/css folder. Most examples I find on the web are all old setups using gulp to compile before the support being added to hugo (from my understanding)
Answer
You can use hugo's extended (like https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.zip) version which automatically compiles SCSS to CSS for you. You can then customize all the setup. If you don't want to/aren't using the extended version, then ofc you will have to go old school with a watcher like ruby SASS or Gulp, etc.
Also please refer: https://gohugo.io/news/0.43-relnotes/ , see Notes. "Hugo is now released with two binary version: One with and one without SCSS/SASS support. At the time of writing, this is only available in the binaries on the GitHub release page. Brew, Snap builds etc. will come. But note that you only need the extended version if you want to edit SCSS. For your CI server, or if you don’t use SCSS, you will most likely want the non-extended version."
I personally use the extended version; that too with Gitlab CI without any issues. I always write/edit SCSS; run hugo and it does the rest. You also have to make sure your theme supports/plays well with it. Theme I use (supports SCSS): https://github.com/luizdepra/hugo-coder/