90%的变量未定义错误源于导入路径错误或加载顺序颠倒；需逐级检查@use/@import路径是否存在、相对起点是否正确、别名是否配置、变量是否在使用前定义，避免循环依赖并优先使用@use。
变量未定义错误，90%出在导入路径写错或顺序颠倒，而不是变量本身没写。
检查 @use 或 @import 的路径是否真实存在
报错行提示用了 $color-active，但编译器根本找不到它——最常见原因是路径拼错了，比如少了个 pub/ 或多写了 src/。
- 打开报错文件（如
pipe.scss），定位到@use或@import语句 - 逐级检查路径：用 VS Code 点击路径跳转，看能否打开目标文件；不能跳转 = 路径错误
- 注意相对路径起点：在
src/scss/pipe.scss里写@use '../pub/variables'，实际找的是src/pub/variables.scss，不是src/scss/pub/variables.scss - 如果路径含
~@/别名，确认构建工具（Vue CLI / Vite / Nuxt）是否已配置别名映射，否则直接按字面路径找，~@/scss/variables可能根本不存在
确认变量定义文件是否在使用前被加载
Sass 不像 JS 有 hoisting，$color-active 必须出现在 @use 或 @import 之后、实际使用之前。尤其在多层引入时容易断链。
- 不要假设“全局变量自动可用”：即使你在
main.scss里引入了变量，pipe.scss单独编译时并不会继承它 - 检查链路：比如
pipe.scss → @use 'pub/global.scss' → @use 'pub/variables.scss'，中间任何一环漏掉或写成@use 'variables'（缺路径）都会中断 - 避免循环依赖：
A.scss引B.scss，B.scss又引回A.scss，Sass 会静默跳过第二次引入，导致变量丢失 - 优先用
@use替代@import：前者强制作用域隔离，能暴露缺失依赖；后者会合并全局作用域，掩盖加载顺序问题
区分不同构建环境下的加载机制
uni-app、Vue CLI、Vite 对 SCSS 入口和注入方式处理完全不同，变量“该在哪引”没有统一答案。
- uni-app：必须在
uni.scss中@import "uview-ui/theme.scss"，且该文件会被自动注入每个 Vue 文件的样式顶部；App.vue里的@import是独立作用域，不共享给组件 - Vue CLI：靠
vue.config.js的css.loaderOptions.scss.prependData注入全局变量，此时所有.vue单文件组件都能用，但pipe.scss这类纯 SCSS 文件不会走这个逻辑，仍需自己@use - Vite：用
css.preprocessorOptions.scss.additionalData，效果类似 Vue CLI，但路径解析基于项目根目录，@import "@/styles/vars.scss"中的@/必须由插件支持，否则报错 - 直接用
sass命令行编译（如sass src/scss/pipe.scss）：完全不识别 Webpack 别名或构建配置，只认物理路径和相对路径
真正卡住人的地方，往往不是“怎么写对”，而是“不知道当前编译流程到底走了哪条路”。先确认你改的文件是被谁调用、以什么方式加载的，再决定变量该放在哪引、怎么引。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
