必须在main.js或main.ts中用import引入，因为Vue CLI和Vite均将该文件作为JS执行入口，仅此处import的CSS会被构建工具识别为模块依赖，交由css-loader/style-loader注入<head>并参与CSS提取，从而唯一满足全局作用域、构建可控、生产可提取三重要求。
必须在 main.js 或 main.ts 中用 import 引入，其他方式基本不可靠。
为什么只有 main.js 的 import 能真正全局生效
Vue CLI 和 Vite 都把 main.js 作为 JS 入口，所有通过 import './xxx.css' 加载的 CSS 都会被构建工具识别为模块依赖，交由 css-loader 和 style-loader 处理——最终注入到 <head> 的 <style> 标签中，并参与 CSS 提取（如生成 app.css）。这个链路是唯一能同时满足「全局作用域」「构建流程可控」「生产环境可提取」三个条件的路径。
常见失效场景：
-
@import "@/assets/css/reset.css"写在<style scoped>里 → 实际只对当前组件内有效，且被data-v-xxx属性隔离，第三方类名（如.el-button）完全不匹配 - 在
App.vue的<style>里写@import→vue-loader不解析该语法，直接报错或静默忽略 - 用
<style src="./xxx.css" scoped>→scoped会给所有选择器加属性选择器，彻底破坏 reset/normalize 的意图
main.js 中引入的写法与路径陷阱
路径必须准确，否则开发时样式缺失、热更新失效、甚至生产环境白屏。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
import './assets/css/global.css'（相对路径）、import '@/assets/css/variables.css'（别名路径，需确认@指向src/） - ✅ 第三方包：
import 'normalize.css'（已安装，无需路径前缀） - ❌ 错误写法：
import 'assets/css/global.css'（缺./或@/，webpack 当 npm 包找） - ❌ 错误写法：
import './assets/css/global.css?raw'（被当成字符串加载，不注入样式） - ❌ 禁止写法：
import 'https://cdn.jsdelivr.net/xxx.css'（浏览器不允许直接importCDN URL）
遇到 Cannot find module？检查三件事：文件是否存在、大小写是否完全一致、tsconfig.json 或 vite.config.ts 里 @ 别名是否正确定义。
如何避免全局 CSS 污染组件样式
全局引入 ≠ 全局污染。关键不在“引不引”，而在“引什么”和“怎么写”。
- 只引入真正需要全局生效的内容：如
normalize.css、仅含:root变量的variables.css、原子工具类（.clearfix、.sr-only） - 绝对不要在全局 CSS 里写具体业务组件类名（如
.user-card、.header-nav），这类样式应进组件或布局文件 - 检查已有全局 CSS 是否含通配符（
* { margin: 0 }）或标签选择器（button { padding: 4px }），它们极易穿透scoped边界 - 第三方 UI 库（如 Element Plus）的 CSS 必须全局引入，但覆盖时建议用
::v-deep(.el-button) { ... }限定容器，而非无差别!important
最容易被忽略的一点：全局 CSS 的加载顺序决定覆盖结果。如果多个 import 语句并存，后 import 的会覆盖先 import 的——比如变量定义要放在 reset 之后、组件库样式之前。
