必须通过 src/app.css 与 +layout.svelte 的 组合引入全局样式，因其他方式（如组件内 @import 或 ）会绕过 svelte 样式生命周期，导致热更新失效、作用域哈希错配、重复注入或构建丢失。
必须通过 src/app.css + +layout.svelte 的 <style global></style> 组合引入，其他方式大概率导致热更新失效、样式覆盖不可控、构建后丢失。
为什么不能在组件里直接 @import 或 <style src="..."></style>
这些写法看似能“生效”，但会绕过 Svelte 的样式生命周期管理：
-
@import在<style scoped></style>里会被忽略（Svelte 不解析它）；加scoped后，导入的规则仍受作用域哈希影响，第三方类名（如.btn）无法命中 -
<style src="xxx.css" scoped></style>会让整个外部文件被强行加上局部哈希，.container变成.container.svelte-xyz，而 HTML 中没这个属性，样式彻底不生效 - 多处重复引入同一份 CSS（比如三个组件都
import 'xxx.css'），打包时可能被 dedupe 掉，也可能被多次注入，行为不可预测
正确路径：只走 src/app.css 和 +layout.svelte
这是 Svelte 官方隐式约定的唯一稳定入口：
- 把所有真正该全局的样式（CSS Reset、字体定义、主题变量、Bootstrap 基础类）全放进
src/app.css - 在
src/routes/+layout.svelte顶部写：<style global><br> @import url('/app.css');<br></style> - 确保
src/app.css是纯 CSS（不要含@layer或未被 PostCSS 处理的语法），否则 Vite 构建可能静默失败
:global() 不是引入外部 CSS 的工具，而是选择器穿透开关
它只解决“本组件内如何匹配外部已存在的类”，不是加载器：
-
:global(.btn) { color: red; }→ 有效：告诉 Svelte “把 .btn 当全局类处理” -
:global(@import 'xxx.css')→ 语法错误，:global()不接受语句，只接受选择器片段 - 想改第三方组件（如 Sveltestrap 的
<button></button>）的内部样式？先确认它的根元素真渲染了class="btn"，再用:global(.btn) { ... }，而不是试图 import 它的 CSS
真正难的不是让样式“出现”，而是下次改一个间距值，能立刻在所有页面生效、不触发 HMR 重载失败、不意外覆盖弹窗动画——这些只有统一入口才能守住。别把 :global() 当胶水去粘散落各处的 @import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
