在 Vue 2 中，全局引入 CSS 文件必须在 main.js 中 import，因只有该方式经 css-loader/style-loader 处理并注入 head，确保构建参与、提取及全局生效；@import 写在 中会被属性隔离，第三方类名无法匹配。
在 Vue 2 中，import 引入 CSS 文件只有在 **JS 模块上下文**（如 main.js 或组件的 <script></script> 块）中才真正生效；写在 <style scoped></style> 里用 @import 是假全局，实际仍被 scoped 属性隔离，第三方类名根本匹配不到。
为什么不能在
Vue 2 的 vue-loader 会把 <style scoped></style> 中的 @import 当作局部作用域内规则处理，自动为选择器添加 data- 属性，并不会把导入的样式提升到全局。结果就是：.el-button、.swiper-slide 这类第三方类名完全不生效。
-
@import '@/assets/css/reset.css'写在<style scoped></style>里 → 样式只对当前组件内带 scoped 属性的元素生效，外部组件和第三方库样式不受影响 - 即使去掉
scoped，@import在<style></style>中也依赖预处理器（如 sass/less），纯<style></style>不支持@import加载本地 CSS 文件（仅支持 URL） - 构建时该
@import不走css-loader流程，无法参与提取、压缩、source map 等环节
正确做法：在 main.js 中 import CSS
这是唯一能确保样式注入 、参与 webpack 构建、且全局生效的方式。Vue CLI 和大多数 Vue 2 脚手架默认配置了 style-loader，它会在运行时把 import 的 CSS 插入 <style></style> 标签。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
-
import './assets/css/global.css'✅ 推荐相对路径，稳定可靠 -
import '@/assets/css/reset.css'✅ 别名路径，需确认@指向src/（检查webpack.base.conf.js或vue.config.js中的resolve.alias） -
import 'normalize.css'✅ 直接引入已安装 npm 包，无需路径前缀 -
import '@/assets/css/global.css?raw'❌ 会被raw-loader当成字符串加载，不注入样式 -
import 'https://cdn.jsdelivr.net/.../tailwind.min.css'❌ 浏览器不允许直接importHTTP(S) URL
常见错误与构建陷阱
很多“看似能跑”的写法，上线后会丢样式或污染作用域，尤其在生产环境启用 CSS 提取（MiniCssExtractPlugin）时更明显。
立即学习“前端免费学习笔记（深入）”；
- 在某个
.vue组件的<script></script>块里写import './xxx.css'→ 开发时可能生效，但 webpack 无法保证其注入顺序，且易被 tree-shaking 误删 - 在
vue.config.js的css.loaderOptions.sass.additionalData中写@import→ 仅对lang="scss"的<style></style>生效，对纯 CSS 或 JS 中import无效 - 用
require('./xxx.css')替代import→ 在 Vue 2 + webpack 下虽能工作，但绕过 ES 模块分析，可能导致 HMR 失效或生产环境 CSS 提取失败 - 路径大小写错误或文件不存在 → 报
Cannot find module，注意 Windows 不敏感但 Linux 敏感，CI/CD 环境常因此失败
最稳的路径永远是 main.js 里的 import，别试图绕过它去“局部全局化”。复杂点在于：一旦你用了多个第三方 UI 库（比如 Element UI + Vant），它们的 CSS 引入顺序会影响覆盖逻辑，得手动调整 import 顺序，而不是依赖“谁先注册谁优先”。
