根本原因是模块未被正确引入或命名空间调用错误，sass 1.23+后@use默认私有作用域，变量需加前缀访问（如v.$primary-color），且@use必须置于文件顶部、不可嵌套，同名变量多模块转发会编译失败。
为什么@use后变量名报undefined？
根本原因是模块未被正确引入或命名空间调用错误，不是变量本身不存在。Sass 1.23+废弃@import后，@use默认私有作用域——所有$var、@mixin、@function必须带前缀访问，否则直接写$color-primary会报错。
- 错误写法：
@use "base/variables";+color: $primary-color;→ 报Undefined variable - 正确写法：
@use "base/variables" as v;+color: v.$primary-color; - 若用
as *（不推荐），需确认无重名：@use "base/variables" as *;→$primary-color可直接用，但多个as *会撞车 -
@use必须在文件最顶部，且不能放在.card { ... }这类嵌套块里，否则 Sass 编译器直接拒绝
多个模块定义同名$var时谁生效？
不会“谁后加载谁赢”，而是根本无法编译——Sass 在解析阶段就校验命名冲突。比如theme.scss和button.scss都定义了$size-large，你在同一文件中@use "theme" as t;和@use "button" as b;完全没问题；但一旦写@use "theme" as *;和@use "button" as *;，编译直接失败，提示"$size-large" is defined multiple times。
- 安全做法：始终用具名
as xxx，哪怕前缀简短如as th、as btn - 第三方库（如
sass:map）也必须@use "sass:map"，不能@import "sass:map"，否则可能和项目内同名map-get函数冲突 - 旧项目混用
@import和@use会导致不可预测行为，Sass 会警告并可能中断编译
如何让组件样式不因@use隔离而丢失全局依赖？
模块隔离是好事，但按钮组件需要读取主题色变量，又不能把variables.scss内容复制一遍——这时得靠@forward精准透出，而不是把所有东西塞进一个入口文件再@import。
- 错误聚合：
@import "variables"; @import "mixins"; @import "components/button";→ 全局污染，下游一用就撞$border-radius - 正确封装：
_index.scss里写@forward "variables" show $primary-color, $spacing-xs;，下游@use "design-system" as ds;→ds.$primary-color可读，ds.$private-token不可见 - 若转发时加
as ds-，则必须写ds-$primary-color，彻底切断命名耦合 -
@forward不执行模块代码，只透出声明；真正执行仍由@use触发，避免重复计算
构建失败但控制台没报Sass错误？
可能是构建工具（Webpack/Vite）配置未适配@use语义，导致Sass编译器根本没运行，或者错误被吞掉。尤其当项目还残留@import语法时，新版sass-loader可能静默降级或跳过处理。
- 检查
sass-loader版本是否≥12.0，低版本对@use支持不完整 - Webpack中确认
css-loader和sass-loader顺序正确，且sass-loader的implementation指向sass（而非node-sass，后者已弃用） - Vite用户注意：
css.modules.localsConvention设为"dashes"或"camelCase"不影响Sass模块，但若同时用CSS Modules，需确保.module.scss文件被正确识别，否则@use能用，但类名混淆失效 - 最简验证法：新建
test.scss，只写@use "sass:math"; @debug math.div(10px, 2);，看能否输出5px——通不过说明Sass引擎根本没跑
@use，其他文件还在@import，Sass编译器会尝试兼容但边界模糊，错误信息常指向错行。必须全量切换，且从依赖树底部（变量/函数层）开始。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
