SASS autoreload

support
21

Same here. Also native CSS variables are supported in all major browsers these days. The syntax may be not as elegant as SASS/SCSS but I always prefer native solutions.

Back on topic I think that this is a known limitation. The toCSS method takes place whenever hugo server is executed and the CSS resources are generated.`

I cannot see how this transformation could take place on the fly with live reload.

I see that this is supposed to just work as @Leo_Merkel said above

CC / @bep

22

My quick look at it says that this should “just work”. If it doesn’t work, it’s possibly something envoronment specific (OS, Linux, Windows, …), and that is hard for me to guess.

24

o.49.2

25

@Leo_Merkel copied your code 1:1.

Can you explain the single lines? maybe its something with the folder structure.

26

Sure.

<!-- SECTION: CSS -->
Variable holds the value for running server
{{ $inServerMode := .Site.IsServer }}
The main sass file located in assets/sass
{{ $sass         := resources.Get "style.sass" }}
Paths where Sass files are stored
{{ $sassIncludes := (slice "assets/dependencies") }}
The resulting CSS file outputs to ./css/styles.css
{{ $cssTarget    := "css/styles.css" }}
Condition: If in server mode enable Source Map, include above Paths
If not in server ode no Source Map and compressed output
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

Condition if server is running (I took the `or` away for simplicity)
{{ if $inServerMode }}

Execute the main.scss as Template (for including variables for colors, fonts, etc.) and pipe it through PostCSS
{{ $css := $sass | resources.ExecuteAsTemplate "main.scss" . | toCSS $cssOpts }}
Absolute URL for the stylesheet styles.css in ./css/
<link rel="stylesheet" href="{{ $css.Permalink | absURL }}" media="screen">
{{ else }}

If not in server mode do this
{{ $css := $sass | resources.ExecuteAsTemplate "main.scss" . | toCSS $cssOpts | resources.PostCSS | fingerprint }}
<link rel="stylesheet" href="{{ $css.Permalink | absURL }}" integrity="{{ $css.Data.Integrity }}" media="screen">
{{ end }}

Please read this article https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/ from @regis. It will give you a lot of explanation for Page Resources. I recommend to read his other articles about Hugo as well.

Hope this helps.

27

Thank you very much. That is great help!