最轻量做法是用 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);
-
/* @vite-ignore */注释必不可少，否则 Vite 会尝试预构建该路径（而开发时路径可能不存在） - 路径必须是字符串字面量，不能拼接变量，否则 Vite 无法静态分析
- 如果样式需异步加载，优先用
link[rel="stylesheet"]+onload，比动态import()更可控
实际项目中最容易被忽略的是：CSS 文件自身的构建产物是否真正隔离。比如开发时用了 sass --watch 单独编译，却忘了在生产构建流程中禁用它，结果两个版本的 CSS 同时打进 dist 目录，仅靠 HTML 里的 开关无法保证不加载错误文件。
