@use不识别Webpack/Vite的resolve.alias，因其是Dart Sass原生命令，仅按文件系统路径或--load-path解析；需通过includePaths或绝对路径桥接两层系统。
SCSS 中的 @use 本身不识别 Webpack/Vite 的 resolve.alias（比如 @/），直接写 @use "@/styles/vars" 会报 No module with the name "@/styles/vars"。必须配合预处理器配置或路径重写才能生效。
为什么 @use 不认 @/ 别名？
@use 是 Dart Sass 原生命令，只走自己的模块解析逻辑，完全不经过 Webpack/Vite 的 resolve.alias。它只认文件系统真实路径或通过 --load-path 指定的查找目录。
-
@use "vars"→ 只在当前目录、includePaths或--load-path下找_vars.scss -
@use "@/styles/vars"→ Dart Sass 把@/当字面路径，根本不会交给 Webpack 解析 - 即使 Webpack 配了
alias: { '@': path.resolve(__dirname, 'src') }，对@use也无效
让 @use 支持别名的两种实操方式
核心思路：把别名“翻译”成 Dart Sass 能理解的绝对路径或加载路径。
- Webpack 场景：在
sass-loader的options.additionalData或options.additionalData中用@use+ 绝对路径，再配合includePaths扩展查找范围
例如：options: { additionalData: `@use "${path.resolve(__dirname, 'src/styles/_vars.scss')}" as vars;`, implementation: require('sass'), sassOptions: { includePaths: [path.resolve(__dirname, 'src/styles')] } } - Vite 场景：改
vite.config.ts的css.preprocessorOptions.scss.additionalData，用fileURLToPath构造绝对路径
例如：additionalData: `@use "${fileURLToPath(new URL('./src/styles/_vars.scss', import.meta.url))}" as vars;` - 更通用做法：统一用
includePaths把src/styles加入 Sass 查找路径，然后所有@use都写相对路径（从includePaths起算）
→@use "vars"就能命中src/styles/_vars.scss
@use 路径必须带下划线和 .scss 后缀
@use 只认 Sass “部分文件”（partials），即文件名必须以 _ 开头，且扩展名必须显式写出（不能省略 .scss）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
@use "vars"（对应_vars.scss）、@use "layout/grid"（对应layout/_grid.scss） - ❌ 错误：
@use "vars.scss"（Sass 不支持直接引用非 partial 的 .scss 文件）、@use "vars"但实际文件叫vars.scss（缺下划线） - ⚠️ 注意：
@use不支持 CSS 文件：@use "reset.css"会直接失败，必须转成_reset.scss
全局注入 vs 局部 @use：别滥用 as *
很多人想在 additionalData 里写 @use "vars" as * 实现“全局变量”，但这会破坏模块封装性，且容易引发命名冲突。
- 推荐做法：每个 SCSS 文件按需
@use，用明确命名空间访问，如vars.$primary-color - 若真要收敛入口，建一个
_index.scss，里面@forward "vars" as var-*，再统一@use "index" -
as *仅适合极小项目或快速原型，上线前务必重构为命名空间访问
真正卡住人的不是语法，而是 Dart Sass 模块系统和构建工具路径系统的两层隔离——@use 在编译器层，alias 在打包层，中间必须靠 includePaths 或绝对路径桥接。漏掉任何一层，都会报 “no module”。
