如何从 styles.scss 中的单 Spa 微前端资源加载资源？

Question

我最近开始将一些 Angular 项目迁移到 single-spa，并且遇到了这个问题。

在子项目（微前端、Angular 12）中，请求的资产styles.scss只会从根/主机 url 中请求，而组件的 scss 文件中请求的资产将正确地在微前端的 url 中查找它们。我尝试使用,--deploy-url的选项提供了正确的基本网址。当以“single-spa 模式”启动时，子项目由构建器提供服务。和属性不起作用，并且会在构建/服务时抛出错误，因为它已在以前的 Angular 版本中被删除。ng serveAPP_BASE_HREF@angular-builders/custom-webpack:dev-server"baseHref""deployUrl"angular.json>architect.build.options"rebaseRootRelativeCssUrls"

根据资产调用位置生成的网络请求的示例图像

文件中的路径是相对的.scss，如下所示：

styles.scss
.sample {
  background-image: url('./assets/img/SAMPLE.png');
}

app.component.scss
.sample-two {
  background-image: url('../assets/img/SAMPLE.png');
}

将资产复制到根项目并使用绝对 URL 不是一种选择。由于子项目需要独立并能够由开发人员独立加载，因此它们应该保留自己的资产，并且如果存在替代方案，则不应将它们复制到两个项目。