sass变量未出现在css中，主因是@use模块隔离、additionaldata作用域错位或文件命名/路径不合规；@use需命名空间访问，_variables.scss须以下划线开头且@use置于文件顶部，vue组件内须显式@use，additionaldata注入不合并作用域，变量计算失效多因作用域遮蔽或误用css变量语法。
你的 Sass 变量没出现在最终 CSS 里，大概率不是写错了，而是变量根本没被编译器“看到”或“注入”到目标作用域——@use 的模块隔离、additionalData 的作用域错位、或文件命名/路径不合规，三者占了 90% 的真实原因。
为什么 @use 引入的变量在组件里用不了
@use 默认不把变量丢进全局作用域，它强制你走命名空间访问。写了 @use "@/styles/_variables"，不代表 $primary-color 就能直接用，你得写 variables.$primary-color。
- 检查被
@use的文件是否以下划线开头（如_variables.scss），否则 Sass 拒绝识别为模块 - 确认
@use语句在文件最顶部，前面不能有任何非注释内容（包括空行、@debug、甚至 BOM 字符） - Vue 单文件组件中，
<style lang="scss"></style>块内必须显式@use，不能只靠additionalData注入——后者只对纯.scss文件生效 - 别混用
@import和@use：只要文件里出现一个@import，整个文件降级为 legacy 模式，@use全部失效
为什么 additionalData 配了却还是报 undefined
additionalData 是字符串注入，不是作用域合并。它不会让 @use 的变量自动裸名可用，尤其当被注入的文件本身也用了 @use 时，as * 根本穿不透嵌套模块。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 短期救急：改用
@import注入，例如additionalData: '@import "@/styles/_variables.scss";'，变量可裸名使用 - 长期方案：用
@use+as *，但确保被注入的_variables.scss里没有其他@use，否则as *不生效 - IDE 自动删分号很隐蔽：检查
additionalData插入后的实际内容，如果末尾分号被删，整行注入失败且 Sass 静默跳过 - 热更新（HMR）可能缓存旧作用域：改完
_variables.scss后，已打开的 Vue 组件<style></style>块未必重编译，手动刷新页面验证
为什么变量值编译出来是字面量而不是计算结果
比如写了 $size: 16px; width: $size * 2;，结果 CSS 输出 width: 16px * 2; 而不是 32px——这说明变量被当作了普通字符串，而非 Sass 可运算值。
- 常见于嵌套块内引用外部变量：Sass 作用域不跨嵌套层级自动传递，确保变量声明在顶层，且未被同名局部变量遮蔽
- 检查是否误用了 CSS 自定义属性语法：写成
--size: 16px或var(--size)，它们是运行时概念，Sass 编译期完全无法参与数学运算 - 插值位置错误：想输出带单位的计算值，必须用
#{$size * 2}，不能写成$size * 2后再加单位，否则单位会被当作文本拼接 - 用了
@forward但没as *或命名空间调用：导出的变量不会自动进入当前作用域
真正难调试的点往往藏在「看不见的地方」：文件编码带 BOM、工作区根目录选错、@use 路径里多写了 .scss 后缀、或者构建配置里残留了 node-sass 的 implementation 引用——这些都不会报红错，只会让变量静默消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
