SASS autoreload

Hello,

im trying to develop a theme.
i dont want to use any JS-Dependencies.
I want to use SASS.
Its all working really nice, except the sass auto-reload doesnt work.
i would not mind if i have to reload the page after a change, but i have to restart the “hugo serve” cli.
tried all the different flags in the cli like --disableFastRender and so on.
am i missing something?

greetings

Are you compiling SASS into CSS through command line, or by using Hugo Pipes?

In either case, show the code you are using to do this.

through pipes. here is the source:

To rule out a browser caching issue, try using the integrity attribute when in server mode

{{- $css := resources.Get $sass | toCSS $cssOpts | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
1 Like

Thanks for the tip. I think the problem is something else. the
browser gets the changes from the content and html and even
reloads the page.

But the generated temp-css file only gets updated after i start
the cli again.

Show the full command you are running for hugo server, and the output. I know you mentioned you tried the —disableFastRender flag. Also, put a -v at the end so we can see more output.

1 Like
WARN 2018/10/15 09:59:03 No translation bundle found for default language "en"
WARN 2018/10/15 09:59:03 Translation func for language en not found, use default.
WARN 2018/10/15 09:59:03 i18n not initialized, check that you have language file (in i18n) that matches the site language or the default language.
INFO 2018/10/15 09:59:03 Using config file: /Users/paul/git/arbeit/hugo-practical-test/config.toml
Building sites … INFO 2018/10/15 09:59:03 syncing static files to /
INFO 2018/10/15 09:59:03 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  2
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 9 ms
Watching for changes in /Users/paul/git/arbeit/hugo-practical-test/{content,data,layouts,static,themes}
Watching for config changes in /Users/paul/git/arbeit/hugo-practical-test/config.toml
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

That console output seems fine to me. Perhaps someone else can help you investigate further

Do you think that i could open up a github issue for that? seems like an actual bug

I’d like for someone else with more Hugo Pipes knowledge than me to take a look at your case before you go that route

OK. Can i do anything then? Or just wait?

@alexandros, @Leo_Merkel, @RickCogley, @rdwatters, @maiki, @kaushalmodi, @pointyfar, and others I’ve missed, any of you have thoughts on this? Appreciate it

Is your i18n folder missing (but that’s probably not the reason)? I have more or less the same SASS setup like yours and it’s working fine (latest Hugo release). Don’t see the reason just now. I have the i18n folder in every project.

Just give us your git repo that we can test it on our machines locally.

1 Like

Looks like he forked the hugo-fresh theme

Yes that seems to be right. I tried that and it works just fine. Possibly the Hugo version?

Doesn’t hurt to try. Thanks Leo.

@paulmayer what hugo version are you using?

No bug. I have nearly the same setup (inspired by @lucperkins theme) and it works. Here’s my SCSS setup:

<!-- SECTION: CSS -->
{{ $inServerMode := .Site.IsServer }}
{{ $sass         := resources.Get "scss/main.scss" }}
{{ $sassIncludes := (slice "assets/dependencies") }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

{{ if or ($inServerMode) (eq .Site.Params.env "LOCAL") }}

    {{ $css := $sass | resources.ExecuteAsTemplate "main.scss" . | toCSS $cssOpts }}
    <link rel="stylesheet" href="{{ $css.Permalink | absURL }}" media="screen">

{{ else }}

    {{ $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 }}

And here’s how I start the server:

hugo server -wDEF --disableFastRender --navigateToChanged

The -wDEF tells Hugo to display Draft, Expired and Future posts. The -w stands for watch and is probably not necessary.

CSS is compiled with every change. And that works even that my assets directory follows the 7-1 Pattern so I have a lot of SCSS folders. Something must be wrong with your setup.

Hope this helps.

1 Like

Sorry, SASS/SCSS doesn’t fall under my expertise; I don’t know how to write those. I maintain my styling in plain old CSS.

1 Like

No worries, thanks for checking in