@use对css变量（--）完全无效，因其仅隔离sass编译期变量（$），而--是浏览器运行时解析的全局机制，二者生命周期与作用域无交集；防--冲突须手动控制声明位置、选择器范围和语义化前缀。
@use 不解决 CSS 变量（--*）覆盖问题，它只解决 Sass 变量（$*）的编译期污染。这是最常被混淆的前提——把 --color 和 $color 当成同一类东西来处理，会导致调试方向完全错误。
为什么 @use 对 --color 完全无效
--color 是运行时机制，由浏览器在渲染阶段解析；@use 是编译期机制，由 Dart Sass 在构建时执行。两者生命周期不重叠，命名空间隔离也无交集。
-
@use "theme"后，theme.$primary能访问，但theme.--primary语法非法，根本不存在 - 你在
_theme.scss里写:root { --primary: #007bff; }，这个声明最终会输出为纯 CSS，和@use的任何命名空间无关 - 多个文件都定义
--primary，谁在 CSS 输出中位置靠后、权重更高，谁就生效——@use不影响顺序，也不插入作用域边界
真正防 --* 冲突的只有三件事
必须手动控制：声明位置、选择器范围、命名前缀。没有自动方案。
-
声明必须落在容器选择器上：写
.card { --card-bg: #fff; }，而不是.card__header { --card-bg: #fff; }——后者对.card__footer无效 -
前缀不可省略：用
--user-avatar-size，不用--size；CSS 自定义属性没有模块系统，拼错名或重名就是静默覆盖 -
避免
:root泛化声明：在:root里设--bg就等于全局广播，嵌套组件无法局部拦截；深色模式应写成.theme-dark { --bg: #121212; }
@use 路径和命名空间写错，$* 就直接不可见
这不是警告，是硬性失败。你不会看到“变量未定义，将使用默认值”，而是编译中断或样式丢失。
-
@use "src/styles/_variables"❌ —— 路径含下划线但没扩展名，Dart Sass 拒绝识别 -
@use "src/styles/variables.scss"❌ —— 显式写.scss扩展名，报No module with the name "variables.scss" -
@use "variables" as v;✅，但后续写$v-primary❌ —— 正确是v.$primary，$始终在变量名前，不在命名空间前 - 忘了
as v，又没用as *，那$primary就是 undefined，连!default都不触发
最易忽略的点：Sass 模块系统和 CSS 变量系统是两套平行机制，一个管构建，一个管渲染。想靠 @use “顺便”管住 --*，就像指望 TypeScript 类型检查阻止运行时 undefined 报错一样，逻辑断层在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
