`retype watch` does not refresh upon changes in CSS referenced in `_includes/head.html`

[rdewit]

In order for us to override the default colors of retype, we have a custom CSS that we reference in head.html like this:

<link href="/static/css/retype-override.css" rel="stylesheet" />

When I make a change in the CSS, retype appears to detect this and reload as can be seen in the terminal (during a retype watch) but it does not refresh the browser window (like it does when I make a change to an .md file for example).

It would be nice if the browser window refreshed when changes in the .css get detected.

[geoffreymcgill]

The issue is likely caused because the browser is temporarily caching the css file.

You can clear the cache by force reloading the page or by adding a cache-buster suffix to the css file path. Something like this:

<link href="/static/css/retype-override.css?v=1.0" rel="stylesheet" />

Then just manually increment the cache buster when you want to force a complete reload the of the .css file.

<link href="/static/css/retype-override.css?v=1.1" rel="stylesheet" />

Hope this helps.

[rdewit]

Unfortunately that is not really a solution. Ideally, the Kestrel server would add something like a Cache-Control: no-cache response header (and certainly not a 304 Not Modified status code.

As you probably know, it's currently quite hard to override the current retype.css (to change colors for example), so in order to efficiently create new CSS to override (and add to) the existing CSS, it would be very convenient if the changes show up immediately when saving the CSS file.

[rdewit]

For now I've got the following workaround (just in case anyone else has a similar issue):

• Install browser-sync
• Run: browser-sync start --no-open --files "static/css/*.css" --proxy http://localhost:5000/ --reload-delay 1000

[geoffreymcgill]

Thanks for the update and sharing the browser-sync work-around. We have logged the issue and will investigate a fix to get this working within Retype.

[geoffreymcgill]

As of Retype v3.0, there is a new {{ nonce }} token that will be replaced with a unique value, such as 3.0.1.739057412015.

The {{ nonce }} is good for building cache-busting URL's, such as:

<link href="/static/css/retype-override.css?v={{ nonce }}" rel="stylesheet" />

Which will be emitted as the following in the generated HTML:

<link href="/static/css/retype-override.css?v=3.0.1.739057412015" rel="stylesheet" />

Hope this helps.