如何使用Sass模块系统避免CSS变量重复

必须用@use替代@import，且所有变量默认不可见，必须加命名空间访问——否则变量必然重复或静默覆盖；@import是文本拼接导致覆盖与重复解析，@use强制私有作用域、单次加载、显式命名空间调用。

直接结论：必须用 @use 替代 @import，且所有变量默认不可见，必须加命名空间访问——否则变量必然重复或静默覆盖。

为什么 @import 一定会导致变量重复

@import 不是模块加载，是文本拼接。两个文件都写 $z-index-modal: 1000，后导入的会直接覆盖前一个；DevTools 只显示最后一处定义位置，你根本不知道哪来的值。更糟的是：@import "utils" 在 5 个文件里各写一次，Sass 就解析 5 次同一文件，变量声明也执行 5 次，编译输出里可能看到同一行 CSS 出现多次。

@use 怎么强制避免变量重复

1. 所有变量、@mixin、函数默认私有，不进全局作用域
2. 必须通过命名空间访问，比如 @use "colors" as c 后，只能写 c.$primary，直接写 $primary 报错 Undefined variable "$primary"
3. 重复 @use "colors" 十次？只解析一次，后续走缓存，无冗余
4. 路径不能带扩展名或下划线：@use "src/styles/variables" ✅，@use "src/styles/_variables.scss" ❌

迁移时最常漏掉的三件事

不是把 @import 换成 @use 就完事：

1. @use 必须是文件中第一个非注释、非空行语句，不能包在 @if、@media 或选择器里，否则报 Invalid CSS after "@use"
2. !default 在 @use 下只生效一次，旧写法中靠多次 @import 回退赋值的逻辑彻底失效
3. 忘了加 as 别名，或路径少了个下划线，变量就完全不可见——编译器不会提示“你可能漏了引用”，只会安静报错或静默失效

真正难的不是语法，而是习惯：每个变量都要想清楚它该属于谁、谁有权访问、要不要暴露给下游——@use 不提供宽容，它只认规则。