全局标准化CSS

Question

我正在构建一个使用 SvelteKit (v2.0.0) 和 Svelte (v5.0.0) 的 SSG 网站。我还使用 PostCSS 并使用

vitePreprocess

集成。

我的项目是运行

sv create

时生成的默认 SvelteKit 项目，添加了 SSG 适配器、PostCSS 和

+layout.svelte

中的

src/routes

文件，以将全局 CSS 属性应用到同一目录中的

+page.svelte

文件。

这就是

+layout.svelte

的样子：

<script lang="ts">
    let { children } = $props();
</script>

<style global lang='postcss'>
    @import 'sanitize.css';

    :root {
        --green: #99dd11;
        --blue: #113399;
    }
</style>

{@render children()}

在

+layout.svelte

的当前形式中，我正在使用

sanitize.css

npm 包。我还尝试使用 postcss-normalize npm 包，将

@import 'sanitize.css';

替换为

@import-sanitize;

，具有相同的结果。

在当前表单中，我可以使用我设置的

+page.svelte

和

green

中的 CSS 变量，但 Svelte 生成的样式表（均带有

blue

和

pnpm run dev

）不包括

pnpm run build && pnpm run preview

中定义的任何样式。即使我没有在

sanitize.css

中使用任何一个变量，它们仍然包含在生成的 CSS 文件中，因为它们是在全局范围中定义的。使用

+page.svelte

的

global

标签中包含的

+layout.svelte

，我的印象是

style

将应用于与

sanitize.css

相同目录（和子目录）中的每个

+page.svelte

文件。此外，在阅读了

THIS

StackOverflow 帖子后，我觉得我当前的代码应该可以工作。我知道这是 3 年前制作的，使用的是 v5.0.0 之前的 Svelte 版本。 以下是一些可能值得包含在寻找此问题的解决方案中的其他文件：

+layout.svelte

svelte.config.js

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

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

编辑：

我做了一些其他尝试来解决这个问题，但都没有成功。

使用

postcss-import 插件
• 以及 sanitize.css 库 将 CSS 从

<style lang="postcss">
    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);
            }
        }
    }
</style>

<h1>Welcome to <a href="https://example.com/">example.com</a></h1>
<p>
    This website was built using SvelteKit's static site generator and hosted on Cloudflare Pages.
</p>

• 移至

  +layout.svelte

  ，并且仅在

  global.css

   中导入 

  global.css

Answer 1

+layout.svelte

标签中删除

@import 'sanitize.css';

并将

<style>

添加到

import 'sanitize.css';

标签即可解决该问题。我在阅读

“我应该把全局样式放在哪里？”时想到了这个解决方案。 vite-plugin-svelte 常见问题解答部分

这指出了我原始

<script>

文件的三个问题：

1. 全局样式应尽可能放置在它们自己的样式表文件中，而不是放置在 Svelte 组件的标签中

2. 样式表文件可以直接在JS中导入，并利用Vite自己的样式处理。
   我的
+layout.svelte
3. 标签中的

   global

   属性是来自

   svelte-preprocess

   的功能，我没有使用或计划使用它。如果我要在 <style> 标签中使用全局样式，我应该使用嵌套

   <style>

   语法，不建议将其用于全局样式。
固定的

:global { ... }

看起来像这样：

+layout.svelte