最直接可靠的方式是在入口文件（如main.js）中import全局CSS，Vite会自动处理并注入；禁用app.html中硬写<link>，避免构建后404；SCSS需安装sass并配置preprocessorOptions；:global()仅解除作用域限制，不可用于导入文件。
在 main.js 或入口文件里 import 全局 CSS
最直接、最可靠的方式是把全局样式（如重置、字体、主题变量）作为模块导入到应用入口。Svelte 本身不拦截 import，Vite 会自动处理并注入到最终的 CSS bundle 中。
常见错误现象：样式没生效、热更新后丢失、构建后路径 404 —— 多半是因为没走模块导入，而是硬写 <link> 到 app.html。
- 确保路径正确，用
@/别名需在vite.config.ts和tsconfig.json中同步配置（纯 Vite 项目无默认别名） - 不要在
app.html里手动加<link rel="stylesheet">，Vite 不会重写这类静态路径，生产环境极易 404 - 如果用了 SCSS/Sass，记得安装
sass并在vite.config.ts中配css.preprocessorOptions.scss，否则@import嵌套会失败
用 <style global> 在组件中声明全局规则
<style global> 是 Svelte 提供的语法糖，等价于不带 scoped 的普通 <style>，但语义更明确。它适合极少量、只在某个组件生命周期内需要的全局副作用（比如临时覆盖第三方 modal 的 z-index）。
容易踩的坑：多个组件都写 <style global>，构建时不会合并，可能产生重复或冲突规则；且热更新时样式不会被自动清理，导致调试困难。
立即学习“前端免费学习笔记（深入）”；
-
<style global>只应在真正必要时使用，比如动态主题切换时注入:root变量 - 不要把它当“快捷方式”来替代
main.js导入 —— 加载时机不可控，SSR 下可能缺失 - 若需在
+layout.svelte（SvelteKit）中注入，仍建议优先import '../global.css'，而非<style global>
引入 Bootstrap 等第三方 CSS 库的注意事项
第三方库（如 Bootstrap、Tailwind）的 CSS 必须走模块导入，不能靠 CDN 链接或 app.html 硬挂载，否则 SSR 和构建路径都会出问题。
典型错误：在 app.html 写 <link href="/bootstrap.min.css"> → 开发正常，构建后变成 404，因为 Vite 把资源打进了 /assets/ 目录。
- 正确做法：在
+layout.svelte或main.js中import 'bootstrap/dist/css/bootstrap.min.css' - JS 部分必须用
?url导入再通过<script src>动态加载，避免 SSR 报ReferenceError: document is not defined - Sveltestrap 这类组件库不自带 CSS，你必须显式导入 Bootstrap CSS，缺了就只有结构没有样式
:global() 不是用来引入外部 CSS 文件的
:global() 是 CSS 选择器修饰符，作用是**解除局部作用域限制**，不是文件引入机制。它只影响当前组件 <style> 块内的某段规则，和 @import、import 完全无关。
常见误用：以为写 :global(@import "./reset.css") 就能导入文件 —— 这语法根本不存在，会报 CSS 解析错误。
-
:global(.btn)是让.btn选择器不加 svelte-xxx 属性前缀 - 想复用外部 CSS 文件，唯一正途是
import或<style src="..."></style> - 嵌套写法如
:global(.a) :global(.b)易出错，应尽量避免；真要穿透多层，优先考虑提取到全局 CSS 文件中统一管理
:global() 或 app.html 路径，不如一开始就坚持一条路径：所有全局 CSS 都走 import，且只在入口文件中出现一次。 
