Angular 11 CLI下Sass Module用@use/@forward引入mixin报错问题

Angular 11 默认已将sass编译器从node-sass替换为dart-sass，原生支持@use/@forward等Sass Module语法，你没有理解错CLI的兼容性，报错是Sass Module本身的作用域规则导致的，和基础配置无关。

错误原因 #

Sass Module 采用作用域隔离设计，和旧版@import的全局注入逻辑完全不同。你在全局主样式styles.scss中导入的utils模块，仅在styles.scss自身的作用域内生效，不会自动透传到其他独立SCSS文件（比如你的_somefile.scss）中，因此_somefile.scss调用mixin时会提示未定义，属于符合预期的表现。

解决方案 #

1. 手动按需导入

在所有需要用到utils模块能力的SCSS文件顶部，单独添加导入语句即可，例如_somefile.scss顶部添加：

// 路径根据你的项目实际结构调整，配置过样式别名可以直接写utils
@use './utils' as *;

dart-sass会自动识别重复导入的模块，不会重复打包代码，无需担心冗余问题。

2. 全局预注入（适合高频使用的公共模块）

如果不想每个文件都手写导入语句，可以通过Angular CLI的预处理器配置，将公共模块自动注入到所有SCSS文件中：
打开angular.json，找到对应项目的architect > build > options节点，添加如下配置：

"stylePreprocessorOptions": {
  "includePaths": ["src"], // 按你的样式根目录调整，比如样式都在src/styles下就填["src/styles"]
  "additionalData": "@use 'utils' as *;"
}

配置完成后重启本地服务，所有SCSS文件都可以直接调用utils下的mixin、变量，无需单独导入。

注意：如果你的项目同时包含旧版@import语法和Sass Module语法，建议逐步迁移完成后再移除全局@import代码，避免出现样式异常。

内容的提问来源于stack exchange，提问作者Steve