@import在中完全无效，因vue编译器直接跳过该语句，不解析、不内联、不报错，导致生成空style标签；应改用import './xxx.css';（带分号）或。
直接用 <style scoped></style> 就行，但必须清楚它不等于 CSS Modules，也不自动处理外部文件引入。
为什么 @import 在 <style scoped></style> 里完全没用
Vue 编译器会跳过 <style scoped></style> 块内的所有 @import 语句——不解析、不内联、不报错，最终生成的 style 标签里压根没那条规则。现象是：图标变方块、class 完全无样式、DevTools 里对应 <style></style> 标签内容为空。
常见错误写法：<style scoped>@import './iconfont.css';</style>
- 它不会把 iconfont.css 内容注入进来，也不会加
data-v-xxx属性 - 浏览器看到的是空的 scoped style，等同于没写
- 想验证？打开 Elements 面板，搜组件对应的
data-v-xxx，点开它的<style></style>标签看内容是否为空
import './xxx.css' 是 Vue SFC 原生语法，不是 CSS 的 @import
这是真正能用的方案：<style scoped>import './base.css';</style>（注意结尾分号不能少）。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章