最稳妥方式是<style src="..." scoped>，因Webpack/Vite将其作为独立模块处理并自动添加data-v-xxx属性；而@import即使加scoped也无效，会导致样式全局泄漏。
直接用 <style src="..." scoped> 最稳妥
想让外部 CSS 文件只作用于当前组件，别污染全局，就别用 @import——它加了 scoped 也拦不住样式泄漏。真正隔离的写法是：<style src="./xxx.css" scoped></style>。Webpack 或 Vite 会把这行当作一个独立的模块处理，自动加上 data-v-xxx 属性选择器，且不会被子组件或第三方组件意外继承。
常见错误现象：<style scoped>@import './xxx.css';</style> 看似合理，但 @import 在编译阶段就被展开成普通 CSS 规则，scoped 对它无效，结果就是样式全局生效。
- 路径必须是相对路径（如
./assets/css/reset.css）或别名路径（如@/styles/theme.css） - 如果引入的是 SCSS/Less，必须显式加
lang="scss"，否则 loader 不识别：<style src="./theme.scss" lang="scss" scoped></style> - 同一个
.vue文件里可以有多个<style>标签，但只有带src的才能真正“局部引入”外部文件；纯@import的仍属内联样式范畴
scoped 遇到子组件样式失效怎么办
你写了 <style src="./dialog.css" scoped>，但发现 <el-dialog> 里的 .el-dialog__header 没变色——这不是引入方式错了，是 scoped 本就不穿透第三方组件 DOM。
这时不能靠改引入方式解决，得换策略：
立即学习“前端免费学习笔记（深入）”；
- 优先用
::v-deep()包裹目标选择器：<style scoped>.my-dialog ::v-deep(.el-dialog__header) { background: #1890ff; }</style> -
::v-deep()只穿透一级，对嵌套两层以上的子组件（比如<el-dialog>里再套<el-input>）不生效，得逐级写或改用非 scoped 全局样式块 - 避免在
<style src="..." scoped>里混写::v-deep()—— 外部 CSS 文件本身不经过 Vue 编译，::v-deep()无效；所有穿透逻辑必须写在当前组件的内联<style scoped>块里
为什么 lang="scss" 必须和 scoped 同时出现才安全
单独写 <style lang="scss" src="./theme.scss">，没有 scoped，那这个 SCSS 就是全局加载；加了 scoped 但漏掉 lang，构建工具可能把它当普通 CSS 解析，导致嵌套语法报错或变量未定义。
SCSS 的作用域行为依赖两个条件同时满足：Vue 的 scoped 编译 + 对应 loader 的正确识别。
- Webpack 项目需确保已安装
sass和sass-loader（v12+ 推荐），否则lang="scss"会静默失败 - Vite 项目默认支持
lang="scss"，但若用了自定义 PostCSS 插件，可能干扰::v-deep()解析，建议关闭无关插件验证 - 嵌套规则（如
.wrapper { .btn { color: red; } }）在scoped下会被正确带上属性选择器；没scoped时，嵌套只是语法糖，最终输出仍是全局 CSS
异步组件加载时 CSS 怎么随需引入
用 defineAsyncComponent 或路由懒加载的组件，其 <style src="..." scoped> 会自动随 JS chunk 加载，不用额外操作。但要注意：如果该 CSS 里含 @font-face 或 @keyframes，它们仍会全局注册——scoped 不影响这些规则的作用域。
- 字体文件路径必须相对于 CSS 文件本身，不是相对于 .vue 文件；否则打包后 404
- 动画名（
@keyframes slide-in）一旦声明就全局可用，哪怕在 scoped 样式块里；命名冲突风险需手动加前缀 - 如果组件被多次动态导入（如表格每行一个弹窗），重复引入同一份
srcCSS 不会造成样式重复，构建工具会去重
scoped 对 @import 的“假隔离”——看着加了，其实没用；还有 lang 和 scoped 必须共存才让预处理器样式真正局部化。这两点不踩坑，局部引入才算落地。 
