additionalData不生效主因是SCSS语法破坏：路径别名未配置、字符串结尾缺换行导致样式连缀、variables.scss含顶层CSS规则；必须用反引号包裹、结尾带\n、路径经@别名解析且文件纯变量/混合器。
为什么additionalData不生效？变量还是报Undefined variable
根本不是配置没写，而是注入内容被 Sass 解析器静默吞掉了。常见原因有三个：
• @use "@/styles/variables.scss" as *; 路径里用的是 @/ 别名，但 vite.config.ts 里 resolve.alias 没配或配错（比如写成 '@': path.resolve(__dirname, 'src') 却漏了 src 后的斜杠）；
• 字符串结尾没换行，additionalData: '@use "@/styles/variables.scss" as *;' 导致组件里第一行样式（如 .box {）被拼成 @use "...";.box {，直接触发 Invalid CSS after ""；
• variables.scss 里写了实际输出的规则（比如 body { margin: 0; }），而 @use 只允许导入纯模块——它会拒绝含顶层样式的文件。
css.preprocessorOptions.sass.additionalData怎么写才安全
必须用反引号包裹、结尾带换行、路径走别名且确保可解析：
• 正确写法：additionalData: `@use "@/styles/variables.scss" as *;\n`；
• 若要同时覆盖 Element Plus 变量，顺序不能错：`@use "element-plus/theme-chalk/src/index.scss" as *;\n@use "@/styles/variables.scss" as *;\n`（Element 的 @use 必须在前，否则它的默认值已锁定）；
• 不要用 @import 加分号省略（@import "@/styles/vars.scss" ❌），必须写全 @import "@/styles/vars.scss";；
• variables.scss 内只放 $color-primary、@mixin center、@function px2rem 这类声明，删掉所有 .reset { ... }。
全局 CSS 文件（如 reset.css）为什么没被自动加载
additionalData 只对预处理器文件（.scss、.sass、.less）生效，纯 .css 文件完全不走这道管道。
• 要让 reset.css 全局生效，只能显式导入：在 main.ts 或入口 JS 文件顶部加 import "@/styles/reset.css"；
• 如果想统一管理，建议把 reset.css 改成 reset.scss，再放进 additionalData 注入链里（但注意它不能含 @use 或 @import，否则和注入逻辑冲突）；
• 构建时 CSS 加载顺序依赖 import 顺序，所以重置样式必须在所有业务样式之前导入。
Vue 单文件组件里 <style scoped lang="scss"></style> 能用全局变量吗
能，但前提是 additionalData 配置正确且无语法错误。
• 不需要任何额外 @import 或 @use，直接写：color: $primary-color; 或 @include flex-center;；
• :deep() 和 ::v-deep 在 scoped 样式中仍可用，不受 additionalData 影响；
• 唯一例外是：如果 variables.scss 里定义了 @function，而你在组件样式里调用时传了非法参数（比如 px2rem(12px) 传了带单位的值），Sass 编译期会报错，且错误定位指向组件内第一行——容易误判为变量没注入。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的，往往不是配置项本身，而是路径解析失败时没有报错，或者换行缺失导致语法连缀。别信“配完就能用”，每次改完additionalData 都该手动检查编译日志里有没有 Failed to resolve import 或 Invalid CSS after。 
