时间戳

首页 > 解决方案 > 如何更改 angular-cli css bundle 生成的资源路径？

angular - 如何更改 angular-cli css bundle 生成的资源路径？

问题描述

描述

在我们基于 webpack 的 Angular 项目中，我们使用下一个部署管道：
1. 将所有静态资源生成到静态文件夹
2. 生成索引 html
3. 将静态资源部署到“静态服务器”（S3 存储桶）
4. 将 index.html 部署到“Main服务器”

Dist 文件夹如下所示： 

dist  
--static  
----anivers-bold.eot  
----logo.svg  
----styles.bundle.css  
----code.bundle.js  
--index.html

index.html 中的资源链接如下所示：
<script src="http://127.0.0.1:4200/code.bundle.js"></script>

所以，现在我生成了类似的结构和index.html，但styles.bundle.css字体和图像设置的链接不正确。
当前：src: url('anivers-bold.eot');
预期：src: url('http://127.0.0.1:4200/anivers-bold.eot');

任何人都知道我如何通过 angular-cli css bundle 更改资源路径？

我尝试什么

您可以在测试存储库中找到测试应用程序。用于ng build测试构建

我深入研究了 angular-cli，发现了 postcss 插件，它处理资源：node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\postcss-cli-resources.js

我尝试使用resourcesOutputPath参数，但它只生成目录。我也尝试在标签中使用 chane href base，但在这种情况下，角度路由器会中断。

标签： angularangular-cliangular-devkit

解决方案

我找到了下一个解决方案：
在 .css 文件中，从远程服务器获取资源，从该服务器请求资源
因此，我们需要使用全局样式的资源（背景 URL、字体）提取样式，所有这些都将正常工作

推荐阅读