如何在React的CSS文件中通过环境变量动态引入外部URL

下面提供几种无需创建多份CSS文件的可行方案：

方案1：使用Sass/Scss预处理器结合环境变量 #

Create React App默认支持Sass，先安装依赖：

npm install sass --save-dev

将原有的index.css重命名为index.scss，在文件中通过预处理器变量拼接URL：

$env: '#{process.env.REACT_APP_ENV}';
@import url('https://externalurl#{$env}01.blob.core.windows.net/XXX/index.css');

最后在React入口文件（如index.js）中引入这个scss文件，构建时会自动根据当前环境变量替换$env的值。

方案2：在JS中动态创建样式标签引入 #

直接在JS里根据环境变量生成外部CSS的URL，然后动态插入link标签到页面头部：

// 在index.js或App.js的顶部添加
const env = process.env.REACT_APP_ENV;
const externalCssUrl = `https://externalurl${env}01.blob.core.windows.net/XXX/index.css`;

const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = externalCssUrl;
document.head.appendChild(linkElement);

这种方式无需依赖预处理器，完全通过JS逻辑处理，简单直接。

方案3：自定义Webpack配置注入全局变量（适合已eject或用自定义配置的项目） #

若项目已 eject 或用craco/customize-cra修改Webpack配置，可通过DefinePlugin把环境变量注入到CSS中：

1. 在Webpack配置文件中添加：

const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_ENV': JSON.stringify(process.env.REACT_APP_ENV)
    })
  ]
};

2. 然后在index.css中直接使用变量拼接：

@import url('https://externalurl' + process.env.REACT_APP_ENV + '01.blob.core.windows.net/XXX/index.css');

注意确保css-loader能正确解析该变量，通常默认配置即可，特殊情况需调整loader配置。

内容的提问来源于stack exchange，提问作者Arindam