在CSS原生语法中，并不支持直接读取环境变量来实现动态加载外部样式表，因为CSS是静态样式语言，没有运行时的变量读取能力。要实现这个需求，需要结合构建工具、JavaScript或者HTML模板的能力来间接完成。
方案一：借助构建工具预处理
如果项目使用Webpack、Vite等构建工具，可以在构建阶段根据环境变量替换CSS中的路径。以Vite项目为例，我们可以在vite.config.js中配置环境变量，然后在CSS预处理文件中使用变量。
首先在项目根目录创建.env.development和.env.production文件：
# .env.development VITE_STYLE_URL=https://dev.ipipp.com/style.css # .env.production VITE_STYLE_URL=https://prod.ipipp.com/style.css
如果使用Less或者Sass等预处理器，可以直接在样式文件中使用环境变量：
// 注意这里的环境变量需要构建工具支持注入到预处理器中
@styleUrl: %VITE_STYLE_URL%;
.external-style {
background-image: url(@styleUrl);
}
如果需要直接引入整个外部样式表，可以在入口HTML模板中通过构建工具注入变量：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="<%= VITE_STYLE_URL %>" /> </head> <body> </body> </html>
方案二：通过JavaScript动态注入
如果需要在运行时根据环境变量动态加载，可以通过JavaScript读取环境变量后动态创建link标签插入到页面中。
假设环境变量已经挂载到window对象上：
// 假设环境变量通过构建工具注入到window.__ENV__中
const env = window.__ENV__ || {};
const styleUrl = env.STYLE_URL || 'https://default.ipipp.com/style.css';
// 创建link标签
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = styleUrl;
// 插入到head中
document.head.appendChild(link);
如果是纯前端项目，也可以通过import.meta.env（Vite项目）或者process.env（Webpack项目）读取环境变量：
// Vite项目读取环境变量
const styleUrl = import.meta.env.VITE_STYLE_URL;
if (styleUrl) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = styleUrl;
document.head.appendChild(link);
}
方案三：HTML模板条件加载
如果项目使用服务端渲染或者HTML模板引擎，可以直接在HTML层面根据环境变量判断加载哪个样式表。
以Node.js的EJS模板为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<% if (env === 'development') { %>
<link rel="stylesheet" href="https://dev.ipipp.com/style.css" />
<% } else { %>
<link rel="stylesheet" href="https://prod.ipipp.com/style.css" />
<% } %>
</head>
<body>
</body>
</html>
各方案对比
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 构建工具预处理 | 构建时就能确定环境的情况 | 无运行时开销，样式提前加载 | 无法在运行时动态切换 |
| JavaScript动态注入 | 运行时需要动态切换样式的场景 | 灵活度高，可随时修改 | 会有样式加载延迟，可能出现闪屏 |
| HTML模板条件加载 | 服务端渲染项目 | 服务端直接输出正确路径，无客户端延迟 | 依赖服务端环境，纯前端项目无法使用 |
注意事项
- 环境变量如果是敏感信息，不要直接暴露在前端代码中，尽量通过服务端下发或者构建时注入非敏感路径。
- 动态加载样式表时要注意加载顺序，避免样式覆盖问题。
- 如果外部样式表加载失败，建议添加对应的降级处理，比如加载默认本地样式。