在App.svelte或+layout.svelte中import全局CSS文件是最稳妥方式；:global()仅适用于局部覆盖，不能替代全局样式加载，因其动态注入、覆盖不可控、不支持预处理器特性。
直接在 App.svelte 或 +layout.svelte 里 import 全局 CSS 文件是最稳妥、最可控的方式；组件内用 :global() 只适合零星覆盖，不是引入全局样式的正路。
为什么不能在组件 <style> 块里写 :global() 引入全局样式
很多人误以为写 :global(body) { ... } 就等于“引入全局样式”，其实这只是放行一条规则，不是加载一个样式表。它有严重副作用：
-
:global()规则随组件挂载/卸载动态注入和移除——如果组件被{#if}控制，样式会跟着消失 - 多个组件都写
:global(:root) { --color: red; }，后挂载的会覆盖先挂载的，顺序不可控 - 无法复用
@import、@use、变量、mixin 等预处理器能力 - Svelte 不解析
:global()括号里的路径或 URL，你没法靠它加载外部文件
正确做法：在顶层入口统一 import 全局 CSS
把真正需要全局生效的样式（重置、字体、工具类、第三方库 CSS）集中到一个文件，比如 src/app.css 或 src/styles/global.scss，然后在应用入口导入：
// src/routes/+layout.svelte（SvelteKit 推荐） <script> import '../app.css'; </script> <slot />
这个位置能确保：
立即学习“前端免费学习笔记（深入）”；
- CSS 在所有路由组件渲染前就已加载，无闪烁或 FOUC
- 服务端渲染（SSR）时也能正常输出
<link>或内联样式 - Vite 会自动处理
@import、@use和变量注入（如 SCSSvariables.scss） - 热更新时整个样式表重载，不会出现旧规则残留
需要全局 SCSS 变量？配 additionalData 而不是硬塞 :global()
如果你用 SCSS，并希望每个组件的 <style lang="scss"> 都能直接用 $primary-color，别在每个组件里 @import，而是在 vite.config.js 中配置：
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/styles/variables.scss";`
}
}
}
这样所有 <style lang="scss"> 都自动前置导入，且变量作用域干净，不污染全局 CSSOM。
遇到第三方组件样式不生效？优先查加载时机和 class 绑定
比如用了 shadcn-svelte 的 Skeleton，但 Tailwind 类没起作用，常见原因不是作用域问题，而是：
- 没在
app.css里正确引入tailwind.css或style-nova.css - 组件通过
$$props.class接收 class，但你没把它绑定到根元素上：<div class="{$$props.class}"> - 使用了
innerHTML或第三方库动态插入 DOM，那些节点没带 Svelte 的svelte-xxx属性，:global()也救不了
真正容易被忽略的是：全局样式不是“写在哪就生效”，而是“谁加载、何时加载、是否参与构建”。把 import 放进组件 <style> 块，等于把构建时静态资源加载逻辑拖进了运行时作用域——这本身就是反模式。
