<style src="./xxx.css" scoped>是唯一真正局部引入外部CSS的方式，因构建工具将其作为独立模块处理并自动添加data-v-xxx属性；而@import即使加scoped也无效，因其在编译前被展开为普通CSS规则，导致样式全局泄漏。
<style src="./xxx.css" scoped></style> 是唯一真正局部引入外部 CSS 文件的方式。其他写法看似能用，实则存在样式泄漏、编译失败或穿透失效等风险。
为什么 @import 加 scoped 仍然全局生效
因为 @import 是 CSS 原生规则，在 Vue 编译前就被 PostCSS 展开为普通 CSS；scoped 只作用于当前 <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 Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- Vite 默认支持
lang="scss"，但若配置了自定义 PostCSS 插件（如postcss-preset-env），可能干扰::v-deep()解析，建议临时禁用验证 - Webpack 项目需确保已安装
sass和sass-loader@^12，旧版本（如 v10）在 Vue 3 中可能静默 fallback 到 CSS 解析 - 同一个
.vue文件可有多个<style>标签，但只有带src的才能真正“局部引入”外部文件
想改第三方组件样式？别指望 src + scoped
<style src="./dialog.css" scoped></style> 对 <el-dialog> 内部的 .el-dialog__header 完全无效——因为第三方组件 DOM 不在当前组件模板中，scoped 天然不穿透。
立即学习“前端免费学习笔记（深入）”；
- 所有穿透逻辑（如
::v-deep()、:deep()）必须写在当前组件的内联<style scoped>块里，不能放在外部 CSS 文件中 - 例如：
<style scoped>.my-dialog :deep(.el-dialog__header) { background: #1890ff; }</style> -
:deep()只穿透一级，对<el-dialog> <el-input> <input>这类嵌套两层以上的结构，需逐级写或改用非 scoped 全局块
真正隔离的关键不是“怎么引入”，而是“谁负责编译”。只有 src 属性让构建工具把它当作一个独立模块处理，才会自动加上 data-v-xxx 并参与 scoped 选择器生成。其他方式都在绕开这个机制，迟早出问题。
