在Vue2中引入CSS文件，关键在于作用域可控与加载时机合理：<style src="..." scoped>能真正隔离作用域并自动添加data-v-*属性，而@import在scoped内仍全局生效，不支持深度选择器穿透。
在 Vue2 组件中引入 CSS 文件，关键不是“能不能”，而是“作用域是否可控”和“加载时机是否合理”。直接用 @import 在 <style scoped> 里写，样式仍可能泄漏——这不是 bug，是 CSS 本身的行为；而用 <style src="..."> 才真正隔离作用域。下面分场景说清楚。
用 <style src="..."> 引入并保持 scoped 隔离
这是最稳妥的局部引入方式，Webpack 会把该 CSS 文件内容注入到当前组件的 <style> 标签中，并正确应用 scoped 属性（即自动加 data-v-* 属性）。
-
<style src="./my-component.css" scoped></style>—— 路径必须是相对路径或带@/别名的绝对路径，不能是纯 URL - 不要在同一个
<style>标签里混写@import和本地样式，否则 scoped 会失效 - 如果引入的是
.scss或.less，必须显式加lang="scss"，否则 loader 不识别 - 报错
style-loader: Adds some css to the DOM by adding a <style> tag？大概率是漏了lang或路径解析失败
@import 在 <style scoped> 中的实际效果
@import 是 CSS 原生规则，它不改变作用域逻辑——即使写在 scoped 块里，导入的样式仍是全局生效的。Vue 只是把它当普通 CSS 处理，不会加 data-v-*。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
@import './reset.css';→ 全局重置，所有组件都受影响 -
@import url('~bootstrap/dist/css/bootstrap.css');→ 依赖 webpack 的~解析，但依然全局 - 想局部化？只能靠 CSS 类名前缀、嵌套选择器，或改用
<style src="..." scoped> - 分号
;必须写，否则编译报错（尤其在 Vue CLI 3+ 中）
全局引入 vs 组件级引入的取舍
全局引入适合 reset、font-icon、主题色变量等跨组件复用的样式；组件级引入适合仅本组件使用的布局、动效、状态类。
立即学习“前端免费学习笔记（深入）”；
- 全局：在
main.js里import '@/styles/global.css'，或在public/index.html用<link> - 组件级：优先选
<style src="..." scoped>，次选用@import+ 显式命名空间（如.my-comp__header） - CDN 样式（如 FontAwesome）建议走
public/index.html，避免构建时路径处理异常 - 注意：Vue2 的
scoped不支持@import后的选择器穿透，/deep/或::v-deep对导入的 CSS 无效
真正容易被忽略的是：<style src="..."> 的路径解析由 vue-loader 控制，而 @import 的路径解析由 css-loader 控制——两者别名行为、别名前缀（@ vs ~）和错误提示完全不同。调试时先看控制台报错来自哪个 loader，再决定查 webpack 配置还是组件写法。
