Closed
Description
Describe the problem
Currently the recommended way to include global styles is to add it to root __layout.svelte, as was suggested by Rich and supported with this PR (#726):
<!-- __layout.svelte -->
<script context="module">
import '../app.scss'
</script>The issue is that these styles are not linked in rendered HTML (like start.css), but rather are included at runtime with JS.
This means that
- the styles are loaded with delay resulting in FOUC
- the app is completely unstyled when JS is disabled
Describe the proposed solution
- There could be a convention for including global styles from
app.[scss|less|css]done by SvelteKit
- src
- app.html
- app.scss
- A more generalized solution would be to allow
app.tsliving alongside app.html, included by SvelteKit. This file may import global styles, but also some scripts, which wouldn't make sense to include in layouts.
- src
- app.html
- app.ts
// app.ts
import './lib/global.scss' // include global styles
import Sentry from '@sentry/browser' // run global scripts
Sentry.init()- Make
app.htmlsmarter (Parcel style), allowing it to include files in whatever format, which would then be compiled to js/css
<!-- app.html -->
<html>
<script src="./app.ts"></script>
<link rel="stylesheet" href="./app.scss">
</html>Alternatives considered
An alternative is to compile CSS separately from SvelteKit and include hashed filename in app.html during build.
Importance
nice to have
Additional Information
Related issues:
#714
Metadata
Metadata
Assignees
Labels
No labels