最可靠的方式是在main.js或main.ts中用import引入全局CSS，因为这是唯一能确保样式全局生效且参与构建流程的路径，其他方式存在作用域错误或构建陷阱。
main.js 或 main.ts 中用 import 引入，是最简单、最可靠的方式。其他方式（比如在 index.html 里加 <link>、在组件里 @import、或靠预处理器配置“自动注入”）要么失效、要么作用域不对、要么有构建时陷阱。
为什么必须在 main.js 里 import？
Vue CLI 和 Vite 都会把 main.js 作为 JS 执行入口，所有通过 import 加载的 CSS 都会被打包工具识别并注入到 DOM 的 <style> 标签中。这是唯一能确保样式**全局生效且参与构建流程**的路径。
常见错误包括：
- 在某个 .vue 组件里用
<style scoped>@import "@/assets/css/reset.css"—— 这个@import不会提升作用域，但实际只对当前组件内有效，且容易被 scoped 属性隔离掉； - 在
vue.config.js的css.loaderOptions.sass.additionalData里写@import—— 这仅对lang="scss"的 style 块生效，对纯 CSS 文件无效； - 用
require('./xxx.css')写在<script>里 —— 在 Vue 3 + Vite 下不被推荐，且可能绕过 CSS 提取逻辑，导致生产环境丢失样式。
main.js 中引入的写法与路径注意点
路径必须是相对路径或别名路径（@/），且不能带 query 参数（如 ?inline）。
-
import './assets/css/global.css'✅（相对路径，推荐） -
import '@/assets/css/reset.css'✅（别名路径，需确认@指向src/） -
import 'normalize.css'✅（已安装的 npm 包，无需路径前缀） -
import '@/assets/css/global.css?raw'❌（会被当成字符串加载，不注入样式） -
import 'https://cdn.jsdelivr.net/npm/tailwindcss@3.4/dist/tailwind.min.css'❌（浏览器不允许直接 import CDN URL）
如果遇到 “Cannot find module” 错误，检查：文件是否存在、大小写是否匹配、别名 @ 是否在 tsconfig.json 或 vite.config.ts 中正确定义。
立即学习“前端免费学习笔记（深入）”；
第三方 UI 库样式怎么引入？
像 Element Plus、Ant Design Vue 等库，其 CSS 文件通常需要显式引入，不能只靠组件注册就自动生效。
- 完整引入：
import 'element-plus/theme-chalk/index.css' - 按需引入（配合 unplugin-vue-components）：
import 'element-plus/theme-chalk/el-button.css'（只引单个组件样式） - 避免在
<style>标签里@import第三方 CSS —— 构建时无法提取，热更新也容易失效。
特别注意：某些库（如 Naive UI）推荐用 CSS-in-JS 方式，此时不应再全局 import 其 CSS，否则样式重复。
全局样式和 scoped 样式共存时的优先级问题
全局 CSS 的选择器一旦没加足够 specificity，很容易被 scoped 组件样式覆盖 —— 因为 Vue 会给 scoped 样式加上属性选择器（如 .btn[data-v-f3f3eg9]），而全局样式没有。
- 解决办法不是滥用
!important，而是提高全局类的选择器权重：.my-app .btn比.btn更高； - 避免在全局 CSS 中写过于宽泛的标签选择器（如
button { ... }），改用语义化类名； - 如果某个组件必须覆盖全局样式，用
:deep(.btn)（Vue 3）或>>>（Vue 2）穿透 scoped 限制，而不是删掉scoped。
真正容易被忽略的是：全局 CSS 的加载顺序会影响最终效果。把它放在 main.js 最顶部（早于 App 组件挂载），才能确保样式在首个组件渲染前就就位。
