So importieren Sie eine SASS-Datei als Inline-CSS (nicht JS) in SvelteKit/Vite ⇐ JavaScript

[Guest]

Wie kann ich eine SASS-Datei als Inline-CSS (nicht JS) mit SvelteKit und/oder Vite importieren?
Wenn ich SvelteKit konfigurieren möchte ( oder Vite), um src/app.scss einzugeben und SOME_PATH/app.css auszugeben.
Die SASS-Datei wird in +page.svelte importiert:

Code: Select all

import '../app.scss';

Die SASS-Datei selbst ist eine einfache Konfiguration von PicoCSS:

Code: Select all

@use '@picocss/pico/scss/pico' with (
$theme-color: 'zinc'
);

Vollständiges Minimal-Repo:

• https://github.com/Leftium/kit-demos/tree/picocss
• https://picocss--kit-demos.netlify.app/

Der Grund, warum ich dies tun möchte, ist die Vermeidung eines FOUC.

• Es gibt einen Moment, in dem ein weißer Hintergrund blinkt, bis das CSS für den Dunkelmodus (kompiliert in JS) geladen ist.
• (Auffälliger auf mobilen iOS-Geräten, aber in Chrome sichtbar, wenn Devtools auf „Cache deaktivieren“ und „Drosselung auf 3G“ eingestellt sind, oder wenn JS einfach deaktiviert ist.)
• Obwohl SvelteKit SSR das CSS einbettet, Dies ist keine Option für SPAs.

Ich konnte das FOUC vermeiden, indem ich das relevante Pico-CSS für den Dunkelmodus manuell in die Basisvorlage app.html Svelte kopierte, aber ich' Ich suche nach einer umfassenderen und automatischeren Lösung.
Ich denke, diese Antwort könnte damit zusammenhängen, bin mir aber nicht sicher, wie ich Vite im Kontext eines SvelteKit-Projekts so konfigurieren soll: https://stackoverflow.com/a/78249321/117030