Как импортировать файл SASS как встроенный CSS (не JS) в SvelteKit/Vite ⇐ Javascript

[Anonymous]

Как импортировать файл SASS как встроенный CSS (не JS) с помощью SvelteKit и/или Vite?
Файл SASS импортируется в +page.svelte:

Код: Выделить всё

import '../app.scss';

Сам файл SASS представляет собой простую конфигурацию PicoCSS:

Код: Выделить всё

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

Полный минимальный репозиторий:

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

Причина, по которой я хочу это сделать, состоит в том, чтобы избежать ПОРЯДОК.

• В какой-то момент белый фон мигает, пока не загрузится CSS для темного режима (скомпилированный в JS).
• (Более заметно на мобильных iOS, но заметно в Chrome, когда в инструментах разработчика установлено значение «отключить кеш» и «переключиться на 3G». Или когда JS просто отключен.)
• Хотя SvelteKit SSR встроит CSS, это не вариант для SPA.

Мне удалось избежать FOUC, вручную скопировав соответствующий CSS Pico для темного режима в базовое приложение. .html Svelte, но я ищу более комплексное и автоматическое решение.
Я думаю, что этот ответ может быть связан с этим, но я не уверен, как настроить Vite таким образом в контекст проекта SvelteKit: https://stackoverflow.com/a/78249321/117030

Подробнее здесь: https://stackoverflow.com/questions/793 ... tekit-vite