svelte组件中内@import url()不生效，因编译器仅重写纯css文本，原样保留@import导致样式无svelte-xxx属性而全局污染；正确方式是在中import './file.css'或直接将样式写入块。
直接在组件里写 <style></style> 就自动限制作用域，不需要额外配置；想引入外部 CSS 文件并保持作用域，必须用 import 方式加载，不能用 @import url() 或 <link>。
为什么 @import url('/path.css') 在 <style></style> 里不生效？
因为 Svelte 编译器只处理 <style></style> 标签内的纯 CSS 文本，@import url() 是 CSS 原生规则，会被原样保留、不经过作用域重写。结果就是：样式进了页面，但没加 svelte-xxx 属性，变成全局污染。
- 错误写法：
<style>@import url('./Button.css');</style>→ Button.css 中的.btn会匹配所有.btn元素 - 正确做法：把 Button.css 当作模块导入，在
<script></script>块中写import './Button.css'; - 注意：这种导入方式依赖构建工具（如 Vite）对 CSS 模块的支持，SvelteKit 默认启用
如何让外部 CSS 文件也享受组件级作用域？
外部 CSS 文件本身没有作用域概念，Svelte 不会自动给它加哈希属性。真正起作用的是“在组件内定义的 <style></style>”，不是“从哪来的 CSS”。所以可靠路径只有一条：把外部文件内容复制进组件的 <style></style> 块，或用构建时插件（如 vite-plugin-svelte-css-modules）做预处理——但后者增加复杂度，不推荐常规项目使用。
- 推荐做法：小而专的样式逻辑（比如一个按钮变体）直接写进组件
<style></style>；大而通用的（按钮基础样式、栅格系统）放进src/app.css并全局管理 - 如果非要复用某段带作用域的样式，抽成 SCSS 变量 + mixin，再在各组件
<style lang="scss"></style>中@use，而不是试图“导入作用域 CSS” -
import './foo.css'的效果等同于把 foo.css 内容插入到 JS 打包产物中，由 CSS 注入逻辑处理——它不参与 Svelte 的作用域编译流程
import 外部 CSS 和写 <style></style> 有什么实际区别？
根本区别在于：前者是运行时注入、无作用域、可被 HMR 热更新但可能闪动；后者是编译时重写、带作用域、HMR 更稳定且样式不会泄漏。
- 用
import './theme.css'→ 构建后生成独立.css文件，所有组件共享，改了会影响全局 - 用
<style>.button { color: blue; }</style>→ 编译后变成.button.svelte-abc123 { color: blue; }，只作用于当前组件 - 混合使用时要注意优先级：作用域样式特异性为 0-1-0（类+属性），比纯标签选择器高，但比全局
!important低
真正难的不是“怎么让样式生效”，而是“改一处时，是否清楚它会在哪几个地方同时变化”。Svelte 的作用域机制默认就帮你划清了这条线——别为了图省事用 import 把外部 CSS 塞进组件，反而绕开了它最稳的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
