scss变量未定义主因是加载失败而非命名错误；需检查路径是否存在、相对起点是否正确、别名是否配置、变量是否在使用前定义，避免循环依赖并优先使用@use。
SCSS变量提示未定义，90%不是你写错了变量名，而是它根本没被加载进来——路径错、顺序乱、作用域断、配置漏，四类问题占了绝大多数。
检查@use或@import路径是否真实存在
报错行写着$u-info未定义，但编译器连theme.scss这个文件都没找到。VS Code 点击路径跳转失败，基本就能锁定是路径问题。
- 相对路径起点永远是当前文件所在目录，不是
src/或项目根目录；比如components/u-button/u-button.scss里写@use '../../uni_modules/uview-ui/theme.scss'，实际找的是src/uni_modules/uview-ui/theme.scss - 别名（如
@/styles/vars.scss）必须在构建工具中显式配置，Vite 要在vite.config.ts的css.preprocessorOptions.scss.additionalData里配，Vue CLI 要在vue.config.js的css.loaderOptions.scss.prependData里配，否则@/就当字面量处理 - 路径必须带扩展名：
@use 'variables.scss'可以，@use 'variables'在@use下会失败（@import可能侥幸通过，但不推荐）
确认变量定义是否在使用前完成加载
Sass 没有变量提升（hoisting），$u-button-plain-u-button-info-color必须出现在@use之后、CSS 规则之前。多层引入时容易断链，比如 A 引 B，B 引 C，C 定义变量，但 A 里直接用 C 的变量，中间只要漏掉一层@use就报错。
- 不要依赖“全局”概念：单独编译某个组件文件时，它不会自动继承
App.vue或main.scss里引入的变量 - 避免循环依赖：
A.scss→@use 'B.scss'，B.scss→@use 'A.scss'，Sass 会静默跳过第二次引入，导致变量丢失且无警告 - 优先用
@use：它强制要求显式命名空间（如@use 'theme' as u→color: u.$u-info），能暴露缺失依赖；@import合并全局作用域，反而掩盖加载断裂
Vite / Vue CLI 配置additionalData或prependData失效
配置写了，重启也试了，变量还是找不到——大概率是 sass-loader 版本和配置项名不匹配，或者路径解析失败。
- Vue CLI 5+（sass-loader v12+）必须用
additionalData，旧版prependData已废弃；Vite 中统一用css.preprocessorOptions.scss.additionalData -
additionalData里的路径必须是绝对路径或正确解析的别名，@import "@/styles/variables.scss"中的@/需确保 Vite 别名已配置（resolve.alias） - 如果用了
scoped样式，additionalData仍生效；但若组件<style></style>标签漏了lang="scss"，整个 SCSS 解析器就不会启动，变量自然不生效
UniApp 项目中uni.scss变量不生效的硬性约束
UniApp 对 SCSS 变量支持有底层校验，不满足任一条件就静默失效，连错误提示都没有。
-
uni.scss必须放在项目根目录（与pages.json同级），放src/uni.scss会被忽略 -
<style></style>标签必须显式声明lang="scss"，写成lang="css"或直接省略，变量全都不解析 - 变量名必须用短横线分隔：
$main-color✅，$mainColor❌（小程序 CSS 解析器会直接丢弃非法标识符） - uView 变量依赖
uni.scss中正确引入theme.scss，路径应为@import './uni_modules/uview-ui/theme.scss';（注意./开头，不是@/）
最容易被忽略的点是：变量文件本身可能被多个地方重复定义，而!default让后定义的值完全失效——你以为改了variables.scss，实际生效的是node_modules/uview-ui里同名变量。全局搜索$u-info:，才能真正看清谁在说话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
