小编Red*_*ven的帖子

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

我最近开始将一些 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');
}
Run Code Online (Sandbox Code Playgroud)
app.component.scss
.sample-two {
  background-image: url('../assets/img/SAMPLE.png');
}
Run Code Online (Sandbox Code Playgroud)

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

assets webpack angular single-spa-angular

7
推荐指数
0
解决办法
1995
查看次数

标签 统计

angular ×1

assets ×1

single-spa-angular ×1

webpack ×1