@import在<style scoped>中完全无效，因Vue编译器直接跳过该语句，不解析、不内联、不报错，导致生成空style标签；应改用import './xxx.css';（带分号）或<style scoped src="./xxx.css">。
直接用 <style scoped> 就行，但必须清楚它不等于 CSS Modules，也不自动处理外部文件引入。
为什么 @import 在 <style scoped> 里完全没用
Vue 编译器会跳过 <style scoped> 块内的所有 @import 语句——不解析、不内联、不报错，最终生成的 style 标签里压根没那条规则。现象是：图标变方块、class 完全无样式、DevTools 里对应 <style> 标签内容为空。
常见错误写法：<style scoped>@import './iconfont.css';</style>
- 它不会把 iconfont.css 内容注入进来，也不会加
data-v-xxx属性 - 浏览器看到的是空的 scoped style，等同于没写
- 想验证？打开 Elements 面板，搜组件对应的
data-v-xxx，点开它的<style>标签看内容是否为空
import './xxx.css' 是 Vue SFC 原生语法，不是 CSS 的 @import
这是真正能用的方案：<style scoped>import './base.css';</style>（注意结尾分号不能少）。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 构建工具（Vite/webpack）会在编译时把
base.css内容内联进当前<style scoped>块，并自动加上data-v-xxx属性隔离 - 路径支持别名：
import '@/assets/css/theme.css'; - 允许后续追加样式：
import './reset.css'; .extra { opacity: 0.8; } - 第三方组件穿透仍需
:deep()，比如改el-input__inner得写:deep(.el-input__inner) { border-radius: 4px; }
src="./xxx.css" 和 import 的路径基准完全不同
这是最容易被忽略的耦合点：改一个文件位置，整个组件样式可能就崩。
-
<style scoped src="./xxx.css"></style>：路径相对于当前 .vue 文件，且该 CSS 文件内部的url()或@font-face必须也相对于它自己 -
import './xxx.css'：路径同样相对于当前 .vue 文件，但构建工具会接管解析，支持别名和更灵活的 resolve 规则 - 两者不能混用；
src写法下，不能再在同一个<style>标签里写任何补充样式，否则会被忽略 - 如果要用
src又要覆盖少量样式，得另起一个<style scoped>块
别把 scoped 当成 CSS Modules
<style scoped> 和 <style module> 是两套机制，混用会导致类名无法解析或样式失效。
-
scoped靠属性选择器（如.btn[data-v-f3f3eg9]），模板里直接写class="btn"就生效 -
module靠构建时重命名 + 导出对象，必须用:class="$style.btn"或:class="{ $style.btn }" -
<style scoped module>合法，但scoped在这里冗余，因为 CSS Modules 本身已保证局部性 - 误以为加了
scoped就等于启用了模块化，结果 class 绑定不生效，查半天发现是语法用错了
真正麻烦的从来不是怎么写，而是路径基准、作用域边界、以及构建工具对不同写法的实际处理逻辑——这三者稍有错位，样式就悄无声息地消失。
