My webComponent has own css style file that used some images as background. Something like background: url("...")
I have differents environments (dev, uat, prod). The code is built once and promoted from one environment to next one till production.
Because my webComponent is deployed in different environments (different versions of it), how can a frontend configure my webComponent to specify the asset baseUrl in order to download the assets from the right environment?
I have tried some solutions:
- use absolute url in webComponent css: at build time i can put the absolute url of my assets. => Not applicable because different environment required different host name.
- css var(): I can define a css var inside the frontend html and referring to it in the web component. => Not scalable on number of images: var() cannot be the base url but only the entire url (because var() is not usable inside url(), see https://stackoverflow.com/a/42331003).
How can I resolve my issue?
