Routify doesn't catch changes in global.css

If I add a rule to global.css, save, and refresh the page, it doesn’t work.

Steps to reproduce

git clone https://github.com/Wolfr/hn-clone-svelte-be.git
npm i
npm run dev

Go to global.css. Add a rule like

* {
  background: yellow;
}

Observe that no change happens.

[Wolfr]

Using style tags in Svelte files works for small demos and small projects.

The Svelte provided CSS scoping is super nice for exceptions to the general rule in bigger projects and for quick coding of experiments.

The reason to have a separate CSS architecture is

1. to be able to use SCSS in its full capacitiy (that is a system where theme variables can traverse through in full) without hacky workarounds
2. to be able to use established conventions such as BEM and ITCSS (see Harry Roberts’s work on this which is absolutely great - it is difficult to explain in a sentence)
3. to be able to use the exact same codebase CSS-wise, regardless of the Javascript framework (we have plenty of projects that provide a CSS base for projects in Angular, PHP and React at the same time)

For example, we use the exact same SCSS in our Wordpress version as in our current Svelte version. There’s some definite business benefits in maintaining proper CSS as a separate “thing”.

[jakobrosenberg]

@Wolfr I’m going off topic here, but is there a reason you don’t use <style> tags in .svelte files? Not a suggestion. Just curiosity.

global.css is a bit of a static file to me. Like an asset. If it were to be used as a dynamic source file instead, it would make more sense to me to import it in main.js.

In general code should act as one would expect, but what happens when people have different expectations or even wrong expectations. I think the best way to handle these scenarios, is by showing a correct approach.

IMO the current structure reflects what can be expected of Rollup. Files in the static folder are static and changing them won’t cause an update. As often seen in other projects, we could create a src/assets folder for css/scss and import it in App.svelte. This keeps things simple in the sense that src is for dynamic content.