Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow inclusion of global styles

See original GitHub issue

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 (https://github.com/sveltejs/kit/pull/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.ts living 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

Issue Analytics

State:
Created 2 years ago
Reactions:16
Comments:7 (4 by maintainers)

Top GitHub Comments

9reactions

aradalvandcommented, Dec 8, 2021

@ebeloded Hi, I have this problem too, the stylesheet file I import in __layout.svelte doesn’t exist in the initial markup. How did you fix this?!

5reactions

benblazakcommented, Jan 12, 2022

not quite sure where to put this – there are several issues (open and closed) discussing this and (relatedly) possible changes to the root __layout.svelte – but in case it helps anyone, or furthers the discussion, i did a bit of testing today on the different ways to load global styles, and how global styles in the root __layout.svelte worked with js on and off, in both dev and preview, and with a __layout.reset.svelte somewhere in the path to another route

loading via js import
- vite feature https://vitejs.dev/guide/features.html#css
- dev
  - FOUC
  - if in root layout, a layout reset won’t reset styles
  - js off, styles won’t be loaded
- preview
  - if in root layout
    - js on, reset doesn’t work
    - js off, reset works
  - css appears to be loaded via <link rel="stylesheet">
loading via a <style global lang="scss"> at the bottom of the file
- dev
  - if in root layout
    - js on, reset doesn’t work, but does cause FOUC
    - js off, reset works
- preview
  - if in root layout
    - js on, reset doesn’t work
    - js off, reset works
  - css appears to be loaded via <link rel="stylesheet">
loading via @use "..."; in a <style lang="scss"> in <svelte:head>
- dev
  - if in root layout, reset works
- preview
  - if in root layout, reset works
  - css appears to be inlined
notes
- tested with safari 14.1.2 on macos 10.14.6 on 12 jan 2022
- i’m using sass and typescript – didn’t test with plain css or javascript
- if using plain css, another option would be to <link rel="stylesheet"> to the file in <svelte:head>
  - this isn’t possible with sass – it seems to work in dev, but fails to build
conclusion
- for my setup, it looks best to @use "..."; the styles in a <style lang="scss"> in <svelte:head>