最稳妥的全局样式引入方式是在 main.js 中 import 全局 CSS；需用模块路径、不加 scoped、避免 @import 外部资源；SCSS/Less 变量注入须用构建插件；禁用 App.vue 的 style 块和 public/ 目录引入。
在 main.js 中 import 全局 CSS 最直接有效
Vue3 项目中，最稳妥、构建链路最清晰的全局样式引入方式，就是在 main.js（或 main.ts）里用 import 语句加载。Vite 或 Webpack 会把它作为入口依赖，走完整构建流程：PostCSS 处理、压缩、HMR 热更新、SSR 兼容都默认支持。
常见错误是误用 @import 写在 App.vue 的 <style scoped></style> 里——它会被 Vue 编译器忽略，或者即使生效也失去作用域控制，还可能造成首屏闪动。
- 路径必须是模块路径（如
@/assets/css/global.css），不能是绝对 URL - 不要加
scoped，否则样式不会真正“全局”生效 - 确保该文件不包含
@import外部 CSS，否则那些外部资源仍会绕过构建系统
用 sass-resources-loader 或 vuetify 的 style-resources 插件注入变量
如果你用的是 SCSS/Less，且希望所有组件都能直接用 $primary-color 这类变量，而不是每个文件都写 @import "@/styles/variables.scss"，就得靠构建插件注入。
Vite 用户推荐 vite-plugin-style-import 或手动配置 css.preprocessorOptions；Vue CLI 用户则常用 sass-resources-loader。它们本质都是在每次编译 SCSS/Less 时，自动前置插入你指定的变量/混入文件。
立即学习“前端免费学习笔记（深入）”；
- 变量文件（如
variables.scss）必须放在src/下，路径需用path.resolve()绝对化 - 注入后，组件内
<style lang="scss"></style>可直接用变量，无需再@import - 注意：纯 CSS 文件无法被这类 loader 处理，只适用于预处理器
避免在 App.vue 的
有人把全局 reset 或工具类写进 App.vue 的 <style></style> 块，以为这样就能“一次写、全局用”。但实际问题不少：
- 如果加了
scoped，样式根本不会透出到子组件，等于白写 - 如果不加
scoped，虽然能生效，但该样式块会参与 HMR，热更新时整个App.vue重载，体验卡顿 - 构建产物中它仍属于 JS chunk 的一部分，不利于 CSS 提取和缓存分离
- SSR 场景下，这个
<style></style>不会提前注入到 HTML head 中，首屏可能漏样式
public/ 目录下的 CSS 只适合纯静态资源
把 CSS 放进 public/ 并在 index.html 里用 <link> 引入，确实能“全局生效”，但它完全脱离构建系统：
- 不走 PostCSS（Autoprefixer、cssnano 全失效）
- 无法使用
@/别名，路径硬编码，迁移成本高 - 修改后不触发 HMR，必须手动刷新浏览器
- Tree-shaking 和 PurgeCSS 对它无效，容易积累冗余规则
仅建议用于第三方皮肤包、活动页定制样式等极少改动、无需构建干预的场景。
