SASS autoreload

support
1

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

2

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.

3

through pipes. here is the source:

4

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
5

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.

6

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
7 
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
8

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

9

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

10

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

11

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

12

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

13

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.

14

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

1 Like
15

Looks like he forked the hugo-fresh theme

16

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

17

Doesn’t hurt to try. Thanks Leo.

@paulmayer what hugo version are you using?

18

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
19

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
20

No worries, thanks for checking in