全局样式必须在布局组件中用 <style global> 统一引入，不能在 main.js 中 import；否则会导致 HMR 失效、构建时样式丢失、预处理器不生效及路径解析错误等问题。
全局样式必须统一入口加载，不能在 main.js 里 import；局部样式默认就生效，但想穿透作用域得用 :global()，且写法极易出错。
为什么不能在 main.js 中 import './app.css'
它看似能“生效”，但会绕过 Svelte 的样式生命周期管理，带来一连串实际问题：
- HMR（热更新）不监听该 CSS 文件——改完
app.css，页面样式不会自动刷新 - 构建时若启用
extractCSS: true，此导入可能被错误内联或遗漏，导致生产环境样式丢失 - Vite/SvelteKit 的 PostCSS、Sass 等预处理器插件默认不处理
main.js上下文，@import 'variables.scss'会直接报Unknown word - 路径解析易错：比如
import '../public/styles.css'在 Vite 中可能触发资源加载失败，而public/下文件本该用<link href="/styles.css">直接引入
正确引入全局 CSS 的唯一推荐方式
把全局样式（重置规则、字体、主题变量、第三方库如 Bootstrap）统一放在 src/app.css，并在布局组件中用 <style global> 导入：
<style global>
@import url('/app.css');
</style>
注意：/app.css 是根相对路径，对应构建后输出的 /app.css（由 SvelteKit 自动处理）。也可直接写规则避免嵌套 @import：
立即学习“前端免费学习笔记（深入）”；
<style global>
:global(body) { margin: 0; font-family: system-ui; }
:global(.btn) { color: blue; }
</style>
- 多个组件都写
:global(body)？后挂载的会覆盖先挂载的，不可控 - 第三方 CSS（如
bootstrap.min.css）也应走同一路径：import 'bootstrap/dist/css/bootstrap.min.css'放在+layout.svelte的<script>块里，而非main.js
:global() 的写法陷阱与安全用法
:global() 不是“整条规则变全局”，它只放行括号内的选择器部分，且不支持嵌套。常见错误和对应写法：
- ❌ 错误：
:global(.a .b) { color: red; }→ 中间的.b仍被局部化（Svelte 会加哈希类） - ✅ 正确：
:global(.a .b) { color: red; }（浏览器原生支持该语法，整个选择器被放行） - ✅ 或拆开：
:global(.a) :global(.b) { color: red; } - 想影响子组件里的
<strong>？写成div :global(strong) { color: goldenrod; }，注意div还是局部的，只作用于本组件内的<div> - 富文本用
{@html}渲染？必须用容器包裹：<div class="rich-content">{@html unsafeHtml}</div>，再写.rich-content :global(h1) { font-size: 2.4rem; }；别写:global(.rich-content h1)——.rich-content是局部类，会被哈希化，:global()不处理它
局部样式默认就可靠，但要注意特异性与动画
Svelte 编译时会为每个组件的元素添加唯一哈希属性（如 svelte-abc123），并重写选择器为 .button.svelte-abc123。这意味着：
-
.button只匹配当前组件内带该哈希属性的元素，外部同名类完全不受影响 - 组件内样式特异性比全局样式高（+0-1-0 权重），天然避免用
!important - 组件内定义的
@keyframes也会被自动作用域化（动画名加哈希），防止全局冲突 - 不要在普通组件的
<style>里写:global(body)或@import——加载时机不可控，热更新异常，复用困难
真正难的不是让样式“生效”，而是让样式变更、复用、调试都可控。用 <style global> 在布局组件里统一管理全局样式，比在 main.js 塞一行 import 多花 10 秒，但省下后续三天查 HMR 失效的时间。
