如何从返回css文件的端点路径使用index.html中的css?

q7solyqu  于 2023-02-20  发布在  其他
关注(0)|答案(1)|浏览(135)

我的前端应用程序正在端口http://localhost:3000上运行。
我有一个端点,它返回特定ID(即88871)的css文件,如下所示:
网址:http://localhost:8080/api/getCSS文件/
我需要动态添加这个css文件到index.html文件的头,如下所示:

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);

这会将以下代码添加到index.html文件的头部。

<link rel="stylesheet" type="text/css" href="http://localhost:8080/api/getCssFile/88871" />

一切看起来都很好。但是,CSS没有反映在网页上。CSS文件将在单击此链接时下载。
网址:http://localhost:8080/api/getCSS文件/
我错过什么了吗?
我试着从API加载css,但是css没有反映在网页上。

46scxncf

46scxncf1#

您的方法不起作用的原因是您通过JavaScript加载CSS文件,JavaScript在文档加载后运行,因此文档不知道链接,因为它已经被浏览器“绘制”。
我不知道您为什么选择让后端服务返回CSS文件,但我的建议是避免这种情况。如果您希望共享样式并定期更新,请考虑创建一个NPM库,该库可以公开样式表并在应用中使用它。

相关问题