Scss live reload wont work in @imported scss files unless editing the top level style.scss

support
1

Ive had issues with scss live reload not really working since around August, somewhere around v0.1.22.0+

My issue is similar to Hugo SASS pipelines do not recompile on updates in imported stylesheets

It isnt completely broken. It’s just that you need to do some voodoo to get the scss live reload “warmed up”

In my case I need to edit the top level style.scss (which is the file processed by resources.Get) . If I edit scss files that are @import from style.scss, the live reload doesnt work - UNTIL i edit the style.scss (ie i make a blank line and save it) then live reloading works when editing imported scss files until i restart the dev server

so I have the structure

CleanShot 2024-12-07 at 12.31.19@2x
CleanShot 2024-12-07 at 12.31.19@2x2148×832 147 KB

{{ if hugo.IsServer }}
    {{ $config := resources.Get "scss/config.scss" | resources.ExecuteAsTemplate "config.scss" . | toCSS (dict "targetPath" "css/config.css" "enableSourceMap" true) }}
    {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS (dict "targetPath" "css/style.css" "enableSourceMap" true) }}
    <link rel="stylesheet" href="{{ $config.RelPermalink }}">
    <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
{{ else }}
    {{ $config := resources.Get "scss/config.scss" | resources.ExecuteAsTemplate "config.scss" . | toCSS }}
    {{ $style := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS }}
    <link rel="stylesheet" href="{{ ($config | minify | fingerprint).RelPermalink  }}">
    <link rel="stylesheet" href="{{ ($style | minify | fingerprint).RelPermalink  }}">
{{ end }}
2

That cache busting thing requires a higher degree. I ended up with the following in my config. Basically you need to watch ALL files ending in scss in all levels. I am pretty sure there is a regex way to write that as one single rule, but never got it working. This one works with three levels of folders. More levels, add more iteration:

# tracking changes to SASS source files
[[cachebusters]]
source = "assets/scss/.*\\.scss"
target = "*\\.css"
[[cachebusters]]
source = "assets/scss/*/.*\\.scss"
target = "*\\.css"
[[cachebusters]]
source = "assets/scss/*/*/.*\\.scss"
target = "*\\.css"