How to consume css in index.html from the endpoint path that returns the css file? - html

Question

My frontend app is running at port http://localhost:3000.
I have an endpoint that returns the css file for specific id(i.e. 88871) as following:
http://localhost:8080/api/getCssFile/88871
I need to add this css file dynamically to head of the index.html file as follows:
let cssUrl = "http://localhost:8080/api/getCssFile/" + id;
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', cssUrl);
document.head.appendChild(link);
This will add following code to head of the index.html file.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/api/getCssFile/88871" />
All looks good. However, Css is not being reflected in the webpage. Css file will be downloaded when this link is clicked instead.
http://localhost:8080/api/getCssFile/88871
Am I missing anything here?
I tried loading css from the api however, the css is not being reflected in the webpage.

Answer 1

The reason your approach is not working is that you are loading the CSS file through JavaScript which runs after your document has already been loaded, so the document does not know about the link as it has already been "painted" by the browser.
I'm not sure why you've chosen the path of having a backend service return a CSS file, but my advice would be to avoid that. If you want shared styling that updates periodically consider creating a NPM library that exposes the stylesheet and consume that within your app.