如何从styles.scss 中的single-spa 微前端资产加载资产？

Question

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

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

Sample image of the resulting network requests based on where the asset is called from

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

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

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

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

Answer 1

这已经解决了吗？我现在面临同样的问题。