Angular 13.3.5升级14.0.3后sass找不到待导入样式表

问题现象 #

将基于sass生成自定义主题的Angular应用从13.3.5版本升级至14.0.3版本后，升级流程本身无报错，但执行主题生成命令时抛出样式导入异常，执行命令与报错信息如下：

> sass ./theming/themes/:./src/assets/themes/

Error: Can't find stylesheet to import.
  ╷
1 │ @use '@angular/cdk';
  │ ^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\core\style\_menu-common.scss 1:1  @forward
  node_modules\@angular\material\_index.scss 33:1                  @use
  theming\themes\dark.scss 1:1                                     root stylesheet

排查版本差异发现：Angular 13.x版本中Angular Material内部样式的@use规则使用相对路径（如@use '../../../cdk/a11y';），14.x版本统一调整为npm包名导入形式@use '@angular/cdk';。尝试在angular.json中添加样式预处理器路径配置未解决问题，配置内容如下：

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
},

解决方案 #

stylePreprocessorOptions配置仅在Angular CLI执行构建时生效，直接调用命令行sass工具编译样式时不会读取Angular的配置文件，因此配置不生效是预期行为。
直接给sass执行命令添加--load-path参数，指定第三方依赖的查找根目录即可修复问题，修改后的命令如下：

sass --load-path=node_modules/ ./theming/themes/:./src/assets/themes/

该参数会告知sass在解析非相对路径的@use/@forward/@import规则时，除当前文件所在目录外，额外到指定的node_modules目录下查找对应依赖，完全适配Angular 14调整后的包名导入逻辑。
如果执行命令后仍报错，先检查本地项目node_modules/@angular/cdk目录是否存在，版本升级过程中若出现依赖漏装，即使路径配置正确也会触发导入错误，重新执行包安装命令补全依赖即可。

内容的提问来源于stack exchange，提问作者antonio.castellon