It takes very long to sync CSS changes

support
1

Hello everyone,
I am experiencing some weird behaviour. If I change something in one of the HTML files, add something to one of the folders or anything else, Hugo applies the changes immediately. If I change my CSS however, which is located in static/css/style.css, it takes really long to synchronize these changes. Sometimes it happens immediately as well, but rarely. Mostly I need to wait for a really long time, even if I try to restart the website server using hugo server -D in the command prompt.

The weird thing:
It detects the changes correctly. Each time I change the CSS, I get this output in the command prompt:
Change of Static files detected, rebuilding site.
[The date and time]
Syncing css\style.css to [Location of the Hugo website on my disk]

2

Having access to your repository might be helpful.

3

Could you please explain what you mean by

it takes really long to synchronize these changes.

if on each change your command prompt tells you that the file is synchronized?

If you mean, that the file is NOT copied over, how do you know that? I would assume that if the file IS in fact copied over, but you don’t see the changes and mean that (not seeing changes in your CSS applied) is not synchronizing, then it could “just” be some good plain old file caching.

Two ways to work through file caching while developing your site:

  1. open the developer tools, go to settings and set that while developer tools are open no caching is going on (works at least in chrome)

  2. add a random string to the stylesheet url (remove when you go live), something like this:

{{ $seed := "foo" }}
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}
{{ $stylesheetlink := printf "%s?version=%s" $css.Permalink $random }}
4

Yes, excuse my bad choice of words. The changes are detected and most likely also synchronized, but I don’t see the changes. In fact, the changes aren’t copied over. If I inspect the source code and open my CSS file there, I don’t see the changes.

open the developer tools, go to settings and set that while developer tools are open no caching is going on (works at least in chrome)

By this you probably mean the “Disable Cache” option in the Network section of the Developer Tools. Unfortunately, this doesn’t seem to change anything.

add a random string to the stylesheet url (remove when you go live), something like this:

The HTML file is supposed to contain this, right? I’m not quite sure where I’m supposed to place this. I’ll play around with it though.