全局css必须统一入口加载，只能放在src/app.css并在+layout.svelte中用导入；在main.js中import会绕过svelte样式生命周期，导致hmr失效、构建异常及预处理器配置失效。
全局CSS必须统一入口加载，不能分散在组件里
直接结论：全局样式（重置规则、字体、主题变量、CSS Reset）只能放在 src/app.css，并在布局文件（src/routes/+layout.svelte 或 src/routes/__layout.svelte）中用 <style global></style> 导入。任何在普通组件的 <style></style> 里写 :global(body) 或 @import 的做法，都会导致热更新失效、多处定义覆盖不可控、复用时复制粘贴。
为什么不能在 main.js 里 import './app.css'
虽然能“生效”，但会绕过 Svelte 的样式生命周期管理，引发实际问题：
-
main.js不属于组件树，HMR 对该 CSS 文件不监听——改完app.css页面样式不会自动更新 - 构建时若启用
extractCSS: true，此导入可能被错误内联或遗漏，导致生产环境样式丢失 - Vite/SvelteKit 插件（如 postcss、sass）默认不处理
main.js中的样式上下文，预处理器配置失效 - 路径解析易出错：比如
import '../public/styles.css'在 Vite 中可能触发Unknown word错误（尤其用了 Sass@import）
正确写法：在 +layout.svelte 中用
这是 SvelteKit v2 推荐方式，语义清晰且完全受框架控制：
<style global>
@import url('/app.css');
</style>
或者直接写规则（避免嵌套 @import）：
<style global>
:global(body) { margin: 0; font-family: system-ui; }
:global(.btn) { color: blue; }
</style>
关键点：
-
@import url('/app.css')中的路径是根相对路径，对应src/app.css经构建后输出到/app.css -
:global()只放行括号内选择器，不能嵌套；写:global(.a) .b是错的，.b仍被局部化 - 如果要用第三方 CSS（如 Bootstrap），也应走同一路径：
import 'bootstrap/dist/css/bootstrap.min.css'放在+layout.svelte的<script></script>块里，而非main.js
富文本、slot 和第三方组件里的样式怎么穿透
{@html} 渲染的内容不带作用域属性，普通选择器无效；<slot></slot> 内容属于父组件作用域，子组件无法直接控制。安全做法是：
- 用 wrapper 包裹富文本：
<div class="rich-content">{@html unsafeHtml}</div>，再在组件中写.rich-content :global(h1) { font-size: 2.4rem; } - 不要写
:global(.rich-content h1)——.rich-content是局部类，会被哈希化，:global()不处理它 - 对 slot 内容，要么由父组件透传
class，要么在父组件中用:global()显式穿透，但需确认节点已挂载（异步内容慎用） - 第三方组件若未将
$$props.class绑定到根元素，:global()就找不到目标节点，此时应优先检查其文档是否支持 class 透传
:global() 是手术刀，不是胶水；src/app.css 是唯一可信的全局样式源头。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
