如何从环境变量导入css文件中的url

jpfvwuh4 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(200)

我在React应用程序中有index.css文件，我正在导入一个外部css文件，如下所示。
@import url('https://externalurldev01.blob.core.windows.net/XXX/index.css');
这个网址会因不同的环境而不同。

Dev : @import url('https://externalurldev01.blob.core.windows.net/XXX/index.css');
QA : @import url('https://externalurltest01.blob.core.windows.net/XXX/index.css');
PROD : @import url('https://externalurlprod01.blob.core.windows.net/XXX/index.css');

我怎样才能动态地进行基于env的导入？
现在，我有一个变通方法，创建三个index.css文件index-dev.css、index-qa.css和index-prod.css，然后有条件地从js文件导入。
但我正在寻找一些解决方案，这样我就不需要创建三个文件。而是从环境变量中获得env。如下所示
@import url('https://externalurl"+process.env.REACT_APP_ENV+"01.blob.core.windows.net/XXX/index.css');
但是这种连接并不起作用。

css

来源：https://stackoverflow.com/questions/75282332/how-to-import-url-in-css-file-from-environment-variable

2条答案

按热度按时间

pes8fvy91#

process.env只在后端可用，所以你不能在浏览器中的css或js中使用它，我通常这样做的方法是在html中填充data-*属性上的值，然后在css中使用attr()函数或js中的dataset属性提取这个属性值。

赞(0）回复(0）举报 2023-02-01

wpcxdonn2#

我能解决这个问题。
我动态导入的css文件如下。

useEffect(() => {
      var head = document.head;
      var link = document.createElement("link");
  
      link.type = "text/css";
      link.rel = "stylesheet";
      link.href = window.REACT_APP_THEME;
  
      head.appendChild(link);
  
      return () => { head.removeChild(link); }
  
    }, []);

由于应用程序部署在Kubernetes群集中，因此从configmap获取设置窗口变量。

赞(0）回复(0）举报 2023-02-01

我来回答

如何从环境变量导入css文件中的url

2条答案

相关问题

热门标签

最新问答