Angular 14升级至15遇样式导入错误：momentum-ui/core相关问题

问题背景 #

Angular 15 项目中安装 @momentum-ui/core 后，执行 npm run start 提示无法找到 ~@momentum-ui/icons/scss/momentum-ui-icons 样式表。原因是 Angular 15 配套的 Sass 编译器（dart-sass）已废弃 ~ 前缀解析 node_modules 路径的写法，但 @momentum-ui/core 库内部仍在使用该语法。

临时解决办法 #

方案1：用 patch-package 修改库代码（推荐） #

这是最彻底的临时方案，直接修正库内的错误路径写法：

1. 安装补丁工具：

   npm install patch-package --save-dev
   

2. 打开 node_modules/@momentum-ui/core/scss/momentum-ui.scss，找到所有包含 ~@momentum-ui/icons 的导入语句，删除 ~ 前缀。比如将：

   @import "~@momentum-ui/icons/scss/momentum-ui-icons";
   

   修改为：

   @import "@momentum-ui/icons/scss/momentum-ui-icons";
   

3. 生成补丁文件：

   npx patch-package @momentum-ui/core
   

4. 在 package.json 的 scripts 中添加自动应用补丁的命令，确保每次 npm install 后补丁生效：

   "scripts": {
     // 其他脚本...
     "postinstall": "patch-package"
   }
   

方案2：手动预导入图标样式 #

通过提前导入图标样式，绕过库内的错误导入逻辑：

1. 先安装依赖的图标库：

   npm install @momentum-ui/icons
   

2. 修改 src/styles.scss，先手动导入图标样式，再导入 core 样式：

   $brand-font-folder: "@momentum-ui/core/fonts";
   $icon-font-path: "@momentum-ui/icons/fonts";
   $images-path: "@momentum-ui/core/images";
   // 提前导入图标样式
   @import "@momentum-ui/icons/scss/momentum-ui-icons";
   // 导入 core 样式
   @import "@momentum-ui/core/scss/momentum-ui.scss";
   

3. 确保 angular.json 中已配置正确的样式预处理器路径：

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

方案3：配置 Sass 别名 #

通过别名让编译器正确解析带 ~ 的路径：
修改 angular.json 的 build 配置，添加 Sass 别名：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他配置...
    "stylePreprocessorOptions": {
      "includePaths": [
        "node_modules"
      ],
      "sassOptions": {
        "alias": {
          "~@momentum-ui/icons": "@momentum-ui/icons"
        }
      }
    }
  }
}

关于 StackBlitz 无问题的说明 #

StackBlitz 采用的编译环境可能保留了对 ~ 前缀的兼容处理，或者使用了旧版的 Sass 加载器，因此未触发该错误，本地 Angular 15 环境的编译链已更新，不再支持该写法。

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