是唯一真正局部引入外部css的方式，因构建工具将其作为独立模块处理并自动添加data-v-xxx属性；而@import即使加scoped也无效，因其在编译前被展开为普通css规则，导致样式全局泄漏。
<style src="./xxx.css" scoped></style> 是唯一真正局部引入外部 CSS 文件的方式。其他写法看似能用，实则存在样式泄漏、编译失败或穿透失效等风险。
为什么 @import 加 scoped 仍然全局生效
因为 @import 是 CSS 原生规则，在 Vue 编译前就被 PostCSS 展开为普通 CSS；scoped 只作用于当前 <style></style> 块内声明的规则，对 @import 后的内容无感。
- 错误写法：
<style scoped>@import './reset.css';</style>→.btn会污染所有组件里的.btn - 正确路径必须是相对路径（如
./assets/css/base.css）或别名路径（如@/styles/theme.css） - 若引入的是 SCSS/Less，必须同时写
lang="scss"和scoped，否则 loader 不识别或编译报错
lang="scss" 必须和 scoped 同时出现才安全
单独加 lang="scss" 不加 scoped → 全局加载；只加 scoped 不加 lang → 构建工具当普通 CSS 解析，嵌套语法、变量、mixin 全部失效。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章