@use 默认将变量封装在模块命名空间中，必须通过“模块名.变量名”显式访问，以避免全局污染和命名冲突；且仅支持以下划线开头的 partial 文件（如 _variables.scss）作为模块。
@use 是 Sass 6.0+ 推荐的模块化加载方式，它能安全共享变量、函数和混合宏，但默认不把变量“注入”当前作用域——这点和旧版 @import 完全不同。直接写 $color: red 然后在另一个文件里用，会报 Undefined variable 错误。
为什么 @use 加载后变量无法直接访问
Sass 把 @use 当作真正的模块系统：每个被 @use 的文件都运行在独立作用域，变量必须显式通过命名空间调用。这是为了防止命名冲突，但新手常忽略这点，以为和 @import 一样“全局可用”。
- 错误写法：
@use 'variables'; body { color: $primary-color; }→ 编译失败 - 正确写法：
@use 'variables'; body { color: variables.$primary-color; } - 可选别名：
@use 'variables' as v; body { color: v.$primary-color; }
@use 必须配合 _ partial 文件名使用
只有以 _ 开头的 SCSS 文件（如 _variables.scss）才能被 @use 正确识别为模块。如果你写成 variables.scss（无下划线），Sass 会拒绝加载，并提示 No mixin named ... 或静默失败——尤其在构建工具中容易被忽略。
- ✅ 正确路径：
@use '../styles/_variables'; - ❌ 错误路径：
@use '../styles/variables';（即使文件存在，也不生效） - 注意：
@use不支持相对路径简写如@use 'variables'，必须写全路径（含_和扩展名可省略）
如何导出变量供 JS 读取（CSS Custom Properties 场景）
纯 @use 机制只在 Sass 编译期起作用，无法让 JS 运行时拿到值。若需 JS 动态读写（比如主题切换），得靠 CSS 自定义属性（--primary-color）桥接，而不是依赖 Sass 变量本身。
立即学习“前端免费学习笔记（深入）”；
- 在
_variables.scss中同时定义两套：$primary-color: #3498db; :root { --primary-color: #3498db; } - JS 里用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color') - 不要尝试用
:export+sass-loader配合@use——:export是 CSS Modules 机制，只对.css文件有效，.scss中写:export会被忽略
最易被忽略的一点：Sass 模块系统不传递“副作用”。你在 _variables.scss 里写的 :root {...} 规则，只有被实际 @use 并参与编译的文件才会生成对应 CSS；如果某个组件 SCSS 文件没引入它，那该组件就不会带上这些自定义属性——这和 @import 全局注入的行为本质不同。
