angularangular-cliangular-devkit

How change paths to resources in generating by angular-cli css bundle?


Description

In our angular project based on webpack we use next deploy pipline:
1. Generate all static resources to static folder
2. Generate index html
3. Deploy static resources to "Static server" (S3 bucket)
4. Deploy index.html to "Main server"

Dist folder looks like:

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

And links to resources in index.html looks like:
<script src="http://127.0.0.1:4200/code.bundle.js"></script>

So, now I generated similar structure and index.html, but links in styles.bundle.css to fonts and images setup incorrect.
Current: src: url('anivers-bold.eot');
Expect: src: url('http://127.0.0.1:4200/anivers-bold.eot');

Anyone know how I can change paths to resources in generating by angular-cli css bundle?

What I try

You can find test app in test repository. Use ng build for test build

I dive in in angular-cli, and found postcss plugin, that process resources: node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\postcss-cli-resources.js

I try use resourcesOutputPath parameter, but it only generating directories. Also I try chane href in base tag, but in this case angular router break.


Solution

  • I found next solution:
    In .css file, that was getting from remote server, resources requesting from that server
    So, we need extract styles with resources (background-url, font) in global styles and all will waork