css多环境样式加载配置_开发与生产差异处理_技术教程

最轻量做法是用 media="screen" 临时加载开发 CSS，上线前删除整行；media 非开关而是媒体查询，无效值如 "dev" 会被浏览器忽略。

如何用 HTML 的 `media` 属性临时隔离开发样式

开发阶段常需快速验证 UI 变化，又不想污染生产构建逻辑。直接在 HTML 中用 media="screen and (max-width: 9999px)" 这类始终为真的表达式加载开发专用 CSS 是最轻量的做法——它不依赖构建工具，浏览器原生支持，且上线前删掉整行即可。

注意：media 不是开关，而是媒体查询条件；若写成 media="dev" 或 media="false"，浏览器会直接忽略该，样式不会加载。

开发时可加：
生产构建脚本中应过滤掉所有含 dev-、-debug 等命名特征的
避免用 media="not all"，部分老版本 Safari 会误判为无效而静默丢弃

Webpack 中通过 `process.env.NODE_ENV` 动态注入 CSS 路径

当样式文件本身需要差异化（比如开发版用未压缩的 CSS，生产用已压缩 + CDN 地址），应在 JS 入口里控制 import 行为，而不是靠 CSS 内部的 @import —— 后者无法被 Webpack 静态分析，会导致开发热更失效或生产漏打包。

示例中使用 require 而非 import，是因为 import 是静态语句，无法条件执行：

if (process.env.NODE_ENV === 'development') {
  require('./styles/main-dev.css');
} else {
  require('./styles/main-prod.css');
}

确保 Webpack 配置中 mode 正确设置，否则 process.env.NODE_ENV 可能为空字符串
若用 TypeScript，需在 declare namespace NodeJS 中补全 process.env.NODE_ENV 类型，否则 TS 报错
不要在 CSS 文件里写 @import 指向环境变量拼接的路径，CSS 不解析 JS 变量

PostCSS 插件 `postcss-env-function` 处理 CSS 中的环境分支

少数场景下，确实需要在 CSS 规则内部做环境判断（例如开发时加 outline: 1px solid red 辅助调试），这时不能靠 JS 控制，得用 PostCSS 在构建时替换。

postcss-env-function 允许你在 CSS 里写：

@if env("NODE_ENV") == "development" {
  .btn {
    outline: 1px solid #f00;
  }
}

必须配合 Webpack / Vite 的 PostCSS 加载器启用，纯 HTML 引入的 CSS 不生效
该插件只处理 @if 和 env()，不支持 @else 或嵌套逻辑，复杂分支建议拆到 JS 层
若构建后 CSS 里仍看到原始 @if 语句，说明 PostCSS 配置未命中该文件（常见于 .module.css 被 css-loader 单独处理而绕过 PostCSS）

Vite 中用 `import.meta.env` 动态加载样式并规避 HMR 问题

Vite 的 HMR 对 CSS 改动响应极快，但若样式文件是通过 fetch 或动态 import() 加载的，HMR 会失效——因为 Vite 默认只监听静态 import 语句。

正确做法是利用 import.meta.env 做编译期替换，而非运行时请求：

const stylePath = import.meta.env.DEV
  ? '/src/assets/styles/debug.css'
  : '/assets/styles/index.css';
// ✅ 编译时确定路径，HMR 正常工作
await import(/ @vite-ignore / stylePath);