必须通过css.preprocessorOptions.scss.additionalData配置自动注入@use "@/styles/variables.scss" as *;，路径需别名且末尾加分号，变量文件仅含$var、@mixin、@function，禁含CSS规则。
全局 SCSS 变量在 Vue 项目中不会自动生效，必须通过构建工具显式注入；Vite 和 Webpack（vue-cli）的配置方式、路径解析逻辑、参数名都不同，混用会导致变量报错或静默失效。
为什么 @import 在组件里写一堆很烦，但直接删掉又报错？
因为 SCSS 变量/混合器只在当前文件作用域内有效，@import 是编译时行为，不是运行时加载。你在某个 <style lang="scss"> 里漏写 @import "@/styles/variables.scss"，里面用的 $primary-color 就会报 Undefined variable。
- 手动 import 容易遗漏，尤其多人协作时没人统一检查
- 重复 import 会导致变量被多次声明（虽然通常不报错，但可能覆盖预期值）
- 真正要解决的是“让每个 SCSS 文件开头自动带上那行
@import”，而不是靠人记
Vite 中必须用 css.preprocessorOptions.scss.additionalData
这是 Vite 唯一支持的全局注入方式，data、prependData 等 webpack 风格参数在 Vite 里完全无效，写了也不起作用。
- 路径必须以
@/开头且确保vite.config.ts里已配好resolve.alias，否则报File to import not found -
additionalData字符串末尾要加分号，否则可能引发语法错误（如@import "...";缺分号 → 编译失败） - 只适合放变量、混合器、函数——不要在里面写
body { ... }这类 CSS 规则，会被重复注入到每个组件样式块里，造成权重混乱 - 如果用了
lang="sass"（缩进语法），得改用sass字段而非scss，否则不生效
Webpack（vue-cli）要用 css.loaderOptions.sass.prependData
vue-cli 5+ 默认用 sass-loader v14，data 参数已废弃，必须用 prependData；老项目若还在用 v10，可能仍认 data，但不推荐降级兼容。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 路径前加
~@/或~src/更稳妥，因为 vue-cli 的 sass-loader 路径解析不如 Vite 稳定 - 如果项目同时用了
less和sass，注意loaderOptions下要分别配less和sass，不能只写一个 - 开启
css.sourceMap: true后，全局注入的变量在浏览器 DevTools 里不会显示来源，调试时容易误判变量定义位置
变量能用，但颜色没变？小心 scoped 样式和 CSS 权重
SCSS 变量注入成功 ≠ 样式渲染正确。常见现象是：变量打印出来是 #9d60ff，但元素背景还是白的——问题往往出在样式作用域或层叠顺序上。
-
<style scoped lang="scss">里用$primary-color没问题，但生成的 CSS 类带属性选择器（如.btn[data-v-abc123]），权重高于全局 class（如.text-primary） - 避免在
additionalData或prependData里定义.text-primary { color: $primary-color; }，这类规则应单独抽成base.css并在main.ts显式导入 - 如果非要覆盖 scoped 内的某条规则，用
::v-deep(.target) { background: $primary-color; }，别信 “关掉 scoped 就行” —— 那等于放弃样式隔离
最常被忽略的点：Vite 的 additionalData 对纯 .css 文件完全无效，它只作用于预处理器（scss/sass/less）；而 Webpack 的 prependData 同样不处理后缀为 .css 的文件。想让 CSS 文件也“感知”变量？不行——得换用 CSS 自定义属性（:root { --primary: #9d60ff; }）配合 JS 注入，那是另一套方案了。
