在 react 应用中，css 文件无法直接访问 `process.env`，因此不能在 `@import url(...)` 中拼接环境变量。本文介绍一种安全、标准且无需重复维护多份 css 的方案：通过 html `data-*` 属性注入环境信息，并结合 javascript 动态加载对应 cdn 样式表。
CSS 本身是静态资源，不支持运行时变量插值或环境判断，@import url('https://...' + process.env.REACT_APP_ENV) 这类写法在浏览器中完全无效——因为 process.env 是 Webpack 构建时注入的 Node.js 环境变量，仅在 JS 模块编译阶段可用，不会出现在最终生成的 .css 文件中，更无法被 CSS 解析器识别。
✅ 正确做法：由 JavaScript 控制动态加载逻辑，将环境标识提前注入 HTML 文档，再按需加载对应 URL 的样式表。
✅ 推荐实现步骤（React + Public HTML）
-
在 public/index.html 的 或 标签中注入环境标识
修改 public/index.html，利用 react-scripts 支持的 env 替换能力（需确保 REACT_APP_ENV 已在 .env 文件中定义）：⚠️ 注意：%REACT_APP_ENV% 是 react-scripts@5+ 支持的 HTML 模板变量语法（构建时自动替换），不是运行时 JS 表达式。确保 .env 文件包含如 REACT_APP_ENV=dev。
-
在入口 JS（如 src/index.js）中读取并动态加载 CSS
移除原 index.css 中的硬编码 @import，改用 JS 动态创建 标签：// src/index.js（在 ReactDOM.render 之前执行） const getCssUrl = () => { const env = document.documentElement.dataset.env || 'dev'; const domainMap = { dev: 'externalurldev01.blob.core.windows.net', qa: 'externalurltest01.blob.core.windows.net', prod: 'externalurlprod01.blob.core.windows.net' }; return `https://${domainMap[env]}/XXX/index.css`; }; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = getCssUrl(); document.head.appendChild(link); -
（可选）增强健壮性：添加加载失败回退与去重
const loadExternalCss = (url) => { if (document.querySelector(`link[href="${url}"]`)) return; // 避免重复加载 return new Promise((resolve, reject) => { const link = Object.assign(document.createElement('link'), { rel: 'stylesheet', href: url, onload: () => resolve(), onerror: () => reject(new Error(`Failed to load CSS: ${url}`)) }); document.head.appendChild(link); }); }; loadExternalCss(getCssUrl()) .catch(err => console.warn('External CSS load failed:', err));
❌ 不推荐的替代方案说明
- 服务端渲染注入 ：增加首屏阻塞，且脱离 React 生态统一管理；
- Webpack 插件预处理 CSS：复杂度高、可维护性差，且无法响应运行时环境切换（如灰度发布）；
- CSS 自定义属性 + attr() 函数：attr() 仅支持 content 属性，不能用于 @import 或 url() 函数，CSS 规范明确禁止。
✅ 总结
- 核心原则：CSS 是声明式静态资源，动态逻辑必须交由 JavaScript 承担；
- 最佳实践：用 data-* 属性桥接构建时环境与运行时逻辑，配合 document.createElement('link') 实现零侵入、易测试、可扩展的样式加载；
- 优势：无需维护多套 CSS 文件、支持运行时环境感知、兼容所有构建工具、便于后续接入 CDN 版本控制或 A/B 测试。
此方案已在生产级 React 应用中广泛验证，兼顾简洁性、可维护性与性能。
立即学习“前端免费学习笔记（深入）”；
