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

Question

我在 React 应用程序中有 index.css 文件，我正在导入一个外部 css 文件，如下所示。

@import url('https://externalurldev01.blob.core.windows.net/XXX/index.css');

而这个 url 会因环境不同而不同。

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

但是串联不起作用。

Answer 1

process.env仅在后端可用，因此您不能在 css 或浏览器中的 js 中使用它。 我通常这样做的方法是在 html 中填充data-*属性的值，然后在 css 中使用attr() function 或 js 中的dataset属性提取此属性值。

Answer 2

我能够解决这个问题。

我正在动态导入 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); }
  
    }, []);

由于该应用程序部署在 Kube.netes 集群中，因此从 configmap 中设置 window 变量。