svelte dev server only applies global styling after I save css file

I have a global.css file under public and I reference it in index.html.

in App.svelte I put this code:

<nav class="nav">
  <div class="nav-center">
    <h1 class="nav-title">Budget calculator</h1>
  </div>
  <button type="button" class="nav-btn">
    <i class="far fa-plus-square" />
    add item
  </button>

</nav>

and what I get is this un-styled page:

But if I open global.css and save (without making any change) I get the styled page:

So everytime I save App.svelte I loose the styling and when saving global.css they are back, any idea why this is happening?