@use不能直接覆盖变量，因其仅用于模块加载和作用域隔离；真正的“覆盖”需通过with参数配合!default声明实现，且with必须位于顶层@use语句中、路径准确、表达式受限，并受构建工具注入干扰。
为什么@use不能直接“覆盖”变量
@use本身不提供覆盖能力，它只做模块加载和作用域隔离。你写@use "config"，$color-primary不会自动变成你想要的值——它只是把config模块的内容挂进config.$color-primary这个命名空间里。所谓“覆盖”，其实是靠with参数在导入时传入新值，且前提是原变量声明用了!default。
常见错误现象：@use "config" with ($color-primary: red)没生效，终端@debug config.$color-primary输出还是默认蓝——大概率是_config.scss里漏写了!default，或者with写在了错误位置（比如写在@use "component"之后）。
-
$color-primary: #007bff !default必须出现在_config.scss中，否则with完全被忽略 -
with只能用在项目最顶层的@use语句上，其他文件一律用@use "config"（不带with） - 路径必须准确：如果
_config.scss在src/styles/下，Vite项目应写@use "@/styles/config" with (...)，而不是@use "config"
@use with的实操限制
with看着像函数调用，实际约束极多。它不是运行时赋值，而是在编译期做字面量替换，所以很多你以为能写的表达式，Sass直接报错。
- ✅ 允许：
$radius-base: 6px、$font-size-lg: config.$font-size-base * 1.25（前提是config.$font-size-base已定义） - ❌ 禁止：
$spacing-xs: calc(#{$spacing-xxs} * 2)（calc()是CSS函数，Sass编译期不处理）、$color-dark: darken($color-primary, 10%)（darken()需要$color-primary已存在，但with里不能依赖其他变量） - ⚠️ 注意：
with只影响当前@use语句导入的模块，不会改变其他地方@use "config"看到的值——每个@use都是独立实例
如何让下游项目真正可定制
如果你在开发一个UI库（比如@myorg/ui），不能只靠with。用户要改一个颜色，不该被迫去翻你源码找@use在哪写。得靠分层设计：
- 把所有可配置变量抽到单独的
_variables.scss，每个都带!default，注释清楚哪些必须提供（如$font-family-base无默认值） - 在库入口
_index.scss里用@forward "variables"透出，而不是@use后直接@include - 文档明确要求用户“在
@use "@myorg/ui"之前定义变量”，例如：$color-primary: #1890ff;<br>@use "@myorg/ui" with (<br> $radius-base: 6px<br>);
Vite/webpack中容易被忽略的冲突点
构建工具会偷偷注入变量，导致with失效。Vite的css.preprocessorOptions.sass.additionalData会在每个SCSS文件顶部插入代码，如果它也写了$color-primary，那你的with就晚了一步——变量已被定义，!default跳过。
Webpack的sass-resources-loader同理：它把资源文件内容拼到每个模块开头，可能造成重复声明，甚至让@use "config"读到两个不同版本的$color-primary。
调试建议：_config.scss末尾加@debug "config loaded, color is: #{$color-primary}";，看终端输出是否符合预期。如果输出两次，说明有双份注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
