CSS changes not reflected on local development server

Developer help Installation
1

Hi,

I’m trying to modify the Starter theme on my local Ghost 4.0 installation. I ran the following commands:

  • yarn
  • yarn dev
  • ghost run --development in another tab

Development server is running, gulp is watching and even reloading the changed CSS files (as shown in the output), but no changes are shown in the browser after I refresh the page.

This is what I see in my yarn dev tab after making some changes to CSS:

[03:05:18] Starting 'css'...
[03:05:18] /Users/nikita/dev/ghost/content/themes/Starter-master/assets/built/screen.css reloaded.
[03:05:18] /Users/nikita/dev/ghost/content/themes/Starter-master/assets/built/screen.css.map reloaded.
[03:05:18] /Users/nikita/dev/ghost/content/themes/Starter-master/assets/built/vars.css reloaded.
[03:05:18] /Users/nikita/dev/ghost/content/themes/Starter-master/assets/built/vars.css.map reloaded.
[03:05:18] Finished 'css' after 482 ms

No actual changes appear on http://localhost:2368. They only appear if I use ghost start instead of ghost run --development. What are the benefits of using ghost run --development / downsides of using ghost start for development?

Could you please help me? Thank you!

2

So the problem seems to be with cache, as emptying cache in Safari and refreshing the page shows updated CSS. But I have to do this (Alt + Cmd + E) each time before refreshing the page. Is there a better way?

3

I don’t know how it works on Safari but I found a solution for Chrome in this post: