Нормализация CSS глобально ⇐ CSS

[Anonymous]

Я создаю веб-сайт SSG, использующий SvelteKit (v2.0.0) и Svelte (v5.0.0). Я также использую PostCSS, используя интеграцию vitePreprocess.
Мой проект — это проект SvelteKit по умолчанию, который он генерирует при запуске sv create с добавлением адаптера SSG, PostCSS и файл +layout.svelte в src/routes, чтобы применить глобальные свойства CSS к файлу +page.svelte в том же каталоге.
< п>Это как выглядит +layout.svelte:

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

let { children } = $props();



@import 'sanitize.css';

:root {
--green: #99dd11;
--blue: #113399;
}


{@render children()}

В текущей форме +layout.svelte я использую npm-пакет sanitize.css. Я также попытался использовать npm-пакет postcss-normalize, заменив @import 'sanitize.css'; на @import-sanitize; с тем же результатом.
В этой текущей форме я могу использовать переменные CSS в +page.svelte, которые я установил, зеленые и синие, но таблица стилей генерируется Svelte (обе с пнпм запуск dev и pnpm run build && pnpm run review) не включает ни один из стилей, определенных в sanitize.css. Даже если я не использую ни одну из переменных в +page.svelte, они все равно включаются в сгенерированный файл CSS, как они определены в глобальной области видимости.
При включении global в теге +layout.svelte style У меня сложилось впечатление, что sanitize.css будет применяться к каждому файлу +page.svelte в тот же каталог (и подкаталоги), что и +layout.svelte.
Более того, прочитав ЭТОТ пост на StackOverflow, я почувствовал, что мой текущий код должен работать. Я знаю, что это было сделано 3 года назад и использует версию Svelte до версии 5.0.0.
Вот некоторые другие файлы, которые, возможно, стоит включить в поиск решения этой проблемы:< /p>

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

svelte.config.js

[/b]

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

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess([vitePreprocess()]),
kit: {
adapter: adapter({
fallback: '404.html'
}),
paths: {
base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
}
}
};

export default config;

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

postcss.config.js

[/b]

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

import postcssPresetEnv from 'postcss-preset-env';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

const config = {
plugins: [postcssPresetEnv(), autoprefixer(), cssnano()]
};

export default config;

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

+page.svelte

[/b]

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

p {
user-select: none;
width: 500px;
@media (max-width: 500px) {
width: auto;
}
}

h1 {
color: var(--blue);
a {
transition: all 0.5s;
&:hover {
color: var(--green);
}
}
}


Welcome to [url=https://example.com/]example.com[/url]

This website was built using SvelteKit's static site generator and hosted on Cloudflare Pages.

Изменить:
Я предпринял еще несколько попыток решить эту проблему, но ни одна из них не сработала.

• Использовал плагин postcss-import вместе с библиотекой sanitize.css.
• Переместил CSS из +layout.svelte в global.css и импортировал global.css только в +layout.svelte

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