全局样式应在 main.ts 中显式导入（如 import '@/styles/global.css'），vite 需配置 preprocessoroptions 支持 sass @import，scoped 下用 ::v-deep 穿透或抽离原子类至独立 base.css。
全局样式文件该放哪、怎么让所有组件自动加载
Vue 项目里写 CSS，最常踩的坑是：在 App.vue 里加 <style></style>，结果子组件里还是得重复 @import 或手动引入。真正“全局生效”的核心，不是文件放哪，而是构建工具是否把它注入到每个模块的样式作用域之前。
Vite 和 Webpack 的处理逻辑完全不同——Vite 默认不自动加载任何全局 CSS，Webpack（尤其用 vue-cli）则可能默认走 main.js 中的 import './assets/styles/index.css'，但这个导入只影响 JS 执行链，对 SFC 的 scoped 样式无强制覆盖力。
- Vite 下推荐统一在
vite.config.ts的css.preprocessorOptions或css.additionalPaths（不支持）之外，改用css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/variables.scss";' } } }——注意这是给预处理器用的，不是纯 CSS - 纯 CSS 全局注入，Vite 必须显式在
main.ts顶部import '@/styles/global.css'，且确保该文件不含:root以外的顶层选择器污染（否则可能被 scoped 组件样式权重压制） - Webpack（如 vue-cli）仍建议走
main.js/ts导入，但要检查vue-style-loader是否启用insertInto选项——默认插入，若项目有 SSR 或微前端，可能需改成insert: '#app'避免样式闪动
scoped 样式下如何穿透或复用全局类名
写了 scoped 的 <style scoped></style>，却发现想用 .btn-primary 这种全局定义的类没效果，不是因为没引入，而是 Vue 编译后加了属性选择器，比如 .btn-primary[data-v-f3f3f3f3]，而全局 CSS 里没这个属性。
解决方式不是关掉 scoped，而是精准控制“哪些需要穿透”：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 单个规则穿透：用
::v-deep(.btn-primary) { color: red; }（注意::v-deep是伪元素，必须带括号和选择器，不能单独写::v-deep） - 整个样式块穿透：用
<style scoped></style>内部加/deep/（已废弃）或::v-global（仅 Vite 4.3+ 支持，且仅限顶层选择器） - 更稳妥的做法：把真正要复用的原子类（如
.text-sm、.flex）抽到独立的base.css，并在main.ts中import，同时在组件中避免对这些类再写 scoped 覆盖
Vite 中 @import 全局变量时 Sass/Less 报错找不到文件
常见报错：File to import not found or unreadable: ~@/styles/variables.scss 或直接提示路径解析失败——根本原因是 Vite 的别名（@）默认不透传给 CSS 预处理器。
必须显式配置预处理器的 additionalData 或 paths：
- Sass/SCSS：在
vite.config.ts中设置css.preprocessorOptions.scss.paths，值为[path.resolve(__dirname, 'src/styles')]，这样@import 'variables'就能命中src/styles/variables.scss - 不要写
@import '@/styles/variables.scss'——@别名在 Sass 层无效，Vite 不接管 CSS 层的路径解析 - 如果用的是
additionalData方式注入变量，注意它会在每个 SFC 的<style lang="scss"></style>开头自动插入内容，适合主题色、断点等，但不适合大段 mixin，否则编译变慢
Webpack 里 CSS 提取后 global 样式失效或顺序错乱
用 mini-css-extract-plugin 提取 CSS 后，发现 global.css 里的重置样式（如 * { margin: 0 }）没生效，或者被组件样式覆盖——本质是提取后的 CSS 文件加载顺序不可控，尤其当多个入口或异步组件触发时。
- 确保全局样式文件在
main.ts中第一个import，且不在任何条件分支或异步逻辑里 - 在 Webpack 配置中，给
mini-css-extract-plugin加insert: 'head'（默认），并确认 HTML 模板里没有手动插入其他<link>打乱顺序 - 更可靠的方式：把全局 reset/base 样式单独打包成
base.css，用html-webpack-plugin的files.chunks.base注入到最前面，其他业务 CSS 放后面
真正麻烦的从来不是“怎么加一行 import”，而是样式优先级、作用域隔离、构建时路径解析、运行时注入时机这四层叠加后的隐性冲突。改一个地方，最好连着看三处：源码 import 顺序、构建配置路径映射、浏览器最终生成的 <style></style> 标签位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
