@use报“no module with the name”错误是因为它只识别下划线前缀的Sass部分文件（如\_utils.scss），且路径必须显式准确、不支持隐式扩展或CSS直引。
为什么 @use 会报 “no module with the name” 错误
因为 @use 默认只认 _filename.scss 这种下划线前缀的“部分文件”（partials），且路径必须显式写全，不能靠隐式加载。你写 @use "base"，它不会自动去找 base.scss 或 _base.css —— 只找 _base.scss，而且得在 load-path 范围内。
常见错误现象： SassError: No module with the name "utils"，其实文件是 utils.scss，没加下划线；或路径写成 @use "../styles/utils"，但实际目录结构是 src/scss/_utils.scss，漏了 _ 和正确相对位置。
- 确保被
@use的文件名以_开头，如_mixins.scss、_variables.scss - 路径用相对路径时，从当前文件出发，不是从项目根；用 Dart Sass CLI 时可通过
--load-path=src/scss扩展查找范围 -
@use不支持 CSS 文件直引（@use "reset.css"会失败），必须是 Sass/SCSS 源文件
@use 后变量/函数/mixin 怎么访问才不冲突
默认情况下，@use 会把整个模块内容挂进一个命名空间里，比如 @use "theme" as t，那 t.$primary-color、t.text-sm() 就是安全调用方式 —— 它天然隔离，不会污染全局作用域。
对比 @import：所有变量、mixin 全部平铺进当前作用域，两个模块都定义了 $spacing，后引入的直接覆盖前一个，调试时根本不知道谁动了谁。
立即学习“前端免费学习笔记（深入）”；
- 不写
as时，默认命名空间是文件名（不含_和扩展名），@use "layout/grid"→ 命名空间为grid - 想完全暴露（类似
@import行为），可用@use "vars" with ($color: blue)+!default配合，但别滥用 —— 这会削弱封装性 - 多个模块导出同名 mixin（如都叫
flex-center），必须通过命名空间区分，没法自动合并或重命名
Dart Sass 中 @use 和 @forward 怎么配合组织设计系统
@forward 不是替代 @use，而是“转发出口”：你建一个 _index.scss，在里面 @forward "colors" as color-*，就能把 _colors.scss 里的 $red-500 重命名为 color-red-500 再透出，上层只需 @use "design-system" 一次性拿到收敛后的 API。
这是真正提升模块封装性的关键操作。没有 @forward，每个业务组件都得自己 @use "colors"、@use "typography"、@use "breakpoints"，耦合散乱；有了它，设计系统可以控制哪些东西可被外部用、怎么用、是否重命名、是否隐藏内部实现。
-
@forward "mixins" show flex-center, clearfix：只透出指定成员，其余隐藏 -
@forward "z-index" as z-*：把所有变量前缀统一改成z-，避免和业务$z-index冲突 -
@use和@forward都不可循环引用：A@useB，B 就不能再@useA，否则编译直接报错
Webpack / Vite 项目里启用 @use 需要改什么配置
不需要改任何 loader 配置 —— 只要你的 Sass 版本 ≥ 1.23.0（Dart Sass），@use 就原生支持。但老项目常卡在 Node Sass（已停更），它根本不认识 @use，会直接报语法错误。
检查方式很简单：npx sass --version 输出带 dart-sass 字样才行；如果是 node-sass，删掉重装 sass 包即可（Vite 默认用 Dart Sass，Webpack 的 sass-loader 也早切过去了）。
- 删掉
node-sass，运行npm install sass --save-dev - 确认
sass-loader版本 ≥ 12.0（对应 Webpack 5），旧版可能仍 fallback 到 Node Sass - Vite 无需额外配置，但如果你在
css.preprocessorOptions.sass.additionalData里注入全局变量，那些变量无法被@use模块访问 —— 它们不在模块作用域内
@use 没加 as 别名，又恰好和另一个模块同名，后续所有引用都会悄无声息地走错命名空间 —— 编译不报错，样式却不对，排查起来得翻三遍路径和导出逻辑。 
