@use "toolkit" as t 时命名冲突会直接报错，Dart Sass 遇到重复命名空间（如多个文件均用 as tools）将硬性失败并提示“Error: There's already a module with namespace 'tools'”，必须统一别名或按语义区分（如 as btnTool / as gridTool），且第三方库需用 @forward 包装并加前缀以避免冲突。
@use "toolkit" as t 时命名冲突会直接报错
当你在多个地方 @use 同名文件（比如都叫 tools.scss），Dart Sass 会拒绝编译，并抛出明确错误：Error: There's already a module with namespace "tools"。这不是警告，是硬性失败——它强制你面对模块边界问题。
常见触发场景：
- 你在
components/_button.scss里写了@use "src/tools" as tools - 又在
layouts/_grid.scss里写了@use "src/tools" as tools - 哪怕两个文件完全不互相引用，只要最终被同一份
main.scss汇总，就会冲突
解决方式只有两个：要么统一用一个别名（如都用 as tool），要么按语义区分（as btnTool / as gridTool）。别名不必“通用”，只要在当前文件内不重复、可读即可。
第三方工具库（如sass-mq）必须加 wrapper 才能用 as
很多老牌 SCSS 工具库（例如 sass-mq、include-media）仍基于 @import 设计，没有下划线前缀，也不导出命名空间友好的接口。直接 @use "sass-mq" 会报 No module with the name。
正确做法是手动包一层：
// _mq-wrapper.scss @forward "sass-mq" as mq-*;
然后在业务文件中：
@use "mq-wrapper" as mq;
.foo { @include mq.mq($from: tablet) { color: red; } }
注意：@forward ... as mq-* 是关键——它把原库所有成员（mixins/functions）前缀重写为 mq-，避免和你自己定义的 breakpoint() 冲突。
as 后不能跟空格或特殊字符，且大小写敏感
@use "src/tokens" as design-tokens 会失败，因为连字符不是合法标识符；@use "src/tokens" as DesignTokens 和 @use "src/tokens" as designtokens 是两个不同命名空间，互不干扰，但容易误判。
建议遵循三条铁律：
- 只用小写字母 + 下划线（
as t、as layout_utils） - 别名长度控制在 2~4 字符，太短难懂（
as u），太长冗余（as typographyHelperFunctions） - 一旦选定，全项目保持一致；别在 button 里叫
as btn，在 card 里又叫as c
as * 是禁用项，尤其对工具库
有人想偷懒写 @use "src/tools" as *，让所有 mixin 直接可用。这在 Dart Sass 中虽未语法报错，但实际效果等同于退化回 @import 的全局污染模式——工具库里的 fluid()、clamp()、rem() 全部平铺进当前作用域，后续你定义同名函数时，编译器不会提示，而是静默覆盖。
更危险的是：某些工具库（如 scss-burger）内部用了 @function 和 @mixin 同名的情况，as * 会导致其中一方被丢弃，且无任何提示。
真正省事的方式是明确调用：tool.fluid(16px, 24px) —— 多敲三个字符，换来的是可追溯、可搜索、可重构的样式逻辑。
最容易被忽略的一点：as 不是语法糖，它是模块边界的显式声明。你每写一次 @use "x" as y，就等于在告诉团队“这个文件只信任 y 命名空间下的内容”，而不是“我随便用，出了问题大家一起查”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
