global.css

[mvolkmann]

Is your feature request related to a problem? Please describe.
I really like that Svelte projects have a predefined place to put global CSS ... in public/global.css.

Describe the solution you'd like
I want SvelteKit to do the same.

Describe alternatives you've considered
I could manually add it to every project I create, but I like the consistency of knowing that every Svelte project has this.

How important is this feature to you?
It's important to my future happiness. ;-)

[Conduitry]

One of the complaints about static/global.css in Sapper is that it didn't support Sass/Less/etc and it wasn't minified in the production build. I think it's reasonable to tell people to include their global CSS in their root layout component so that it will be handled as part of the rest of their styles. Having the default template implicitly encouraging people to have a static CSS file that's copied over as-is into their production build seems like the wrong idea. It's still easy to add your own and to edit src/app.html if that's what you really want to do.

[Rich-Harris]

Agree with that, though maybe there is a case for a src/routes/global.css or similar that gets imported by $layout.svelte — people do often ask where they're supposed to put global styles, and a global.css is both a useful convention and an easy way to teach people that they can import CSS files directly into their components and modules in SvelteKit.

Regardless, we should remember to update the migration docs

[babichjacob]

In support of src/global.css, src/global.scss, or src/global.less depending on which was picked during the create-svelte process.

[mvolkmann]

An issue with adding <link rel="stylesheet" href="/global.css"> to src/app.html is that Vite won't recognize changes in global.css and update the browser.
However, if you instead put global.css in src and add import '../global.css'; to src/routes/index.js then it will recognize changes and update the browser.
So if there is a decision to include a global.css file by default, it seems this is the best approach.

[GrygrFlzr]

Merged and released.