在 Vue 2 中，全局引入 CSS 文件必须在 main.js 中 import，因只有该方式经 css-loader/style-loader 处理并注入 head，确保构建参与、提取及全局生效；@import 写在 中会被属性隔离，第三方类名无法匹配。
在 Vue 2 中，import 引入 CSS 文件只有在 **JS 模块上下文**（如 main.js 或组件的 <script></script> 块）中才真正生效；写在 里用 @import 是假全局，实际仍被 scoped 属性隔离，第三方类名根本匹配不到。
为什么不能在
Vue 2 的 vue-loader 会把 中的 @import 当作局部作用域内规则处理，自动为选择器添加 data- 属性，并不会把导入的样式提升到全局。结果就是：.el-button、.swiper-slide 这类第三方类名完全不生效。
-
@import '@/assets/css/reset.css'写在里 → 样式只对当前组件内带 scoped 属性的元素生效，外部组件和第三方库样式不受影响 - 即使去掉
scoped，@import在中也依赖预处理器（如 sass/less），纯不支持@import加载本地 CSS 文件（仅支持 URL） - 构建时该
@import不走css-loader流程，无法参与提取、压缩、source map 等环节
正确做法：在 main.js 中 import CSS
这是唯一能确保样式注入 、参与 webpack 构建、且全局生效的方式。Vue CLI 和大多数 Vue 2 脚手架默认配置了 style-loader，它会在运行时把 import 的 CSS 插入 标签。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
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"的生效，对纯 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 顺序，而不是依赖“谁先注册谁优先”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
