replace urls in styles.css after ng build (kubernetes helm)

[ornate mirage]

• I run ng build on jenkins and then build a docker image from the workspace on jenkins.

• I deploy to kubernetes using a helm chart

But there is a url in our styles.scss file (which ends up in the styles[HASH].css file after ng build). The url is supposed to point to a microservice on the same kubernetes cluster so needs to be configurable.

I don't want to replace this before building because we want to be able to reuse the image which is built for each release for different deployments.

What can I do? Run a script after deployment that just runs a replace in the styles[HASH].css file?

[hoary urchin]

Would CSS Custom Properties work for that?

[ornate mirage]

I think if I

• made a new css with :root { --url: myurl; } in it
• told angular not to bundle this css file
• and then the styles css had an import of that file but it was lazy loaded i.e. it doesn't get it during ng build then .... maybe?

but i've gone with a different approach now

I'm going to load the url into an env variable using helm and put a RUN sed in the dockerfile and just replace the string in styles[HASH].css before it launches nginx in the container

[low sequoia]

I did something dirty with something similar, i had to wrap all classes in my compiled style.css in another class (it was a web component). So i made a nodejs script which added “ .css-class-here { “ infront of the styles.css output, and “ } “ at the end, renamed it to styles.scss, and recompiled the styles.scss using node-sass

What i am trying to say with that is perhaps u could add a custom script in ur package.json and name it “kubernetes” or something, which does ng build && node ur-custom-script.js
And that custom script searches urls and replaces them in the compiled styles.css

[hoary urchin]

I would just load a new <style> in different CI builds with different :roots. But I don't know exactly what your situation is.

[ornate mirage]

I'm avoiding this so I don't have to publish new docker images for the same version because of what is essentially config

[hoary urchin]

Seems like you could just do

<link href="/assets/css/url.css" rel="stylesheet">

then in your CI, replace/modify the url.css file with the value you need. Then you don't have to change Angular's build at all

[low sequoia]

Yeah I understand, I didn’t really want to do it as well since it seems hacky. But for me it worked and I didn’t bother haha.

[ornate mirage]

oh wow even if the url.css file is doing an import from an external url ?

[hoary urchin]

it could be done that way. Although that might cause a FOUC
https://en.wikipedia.org/wiki/Flash_of_unstyled_content