CSS无法区分环境，因其是纯静态规则集，不支持条件逻辑；环境差异必须由构建工具在JS入口或配置中通过process.env.NODE_ENV或import.meta.env控制CSS引入路径。
CSS 本身没有环境概念，开发环境和生产环境的“引入区别”完全由构建工具在打包时决定，不是 CSS 自己判断，也不是运行时切换。
为什么不能在 CSS 里写 if (env === 'production')
CSS 是纯静态规则集，不支持条件逻辑、变量计算或环境检测。以下写法全部无效且会被浏览器忽略：
@media (env: development) { ... }
@if process.env.NODE_ENV === 'dev' { ... }
:root { --color: env('VITE_THEME'); }
这些语法不存在于 CSS 标准中。任何试图让 CSS “自己区分环境”的做法，本质都是构建阶段未介入导致的误判。
Webpack/Vite 中真正起作用的引入控制点
环境差异必须落在 JS 入口或构建配置中，靠 process.env.NODE_ENV 或 import.meta.env 做条件判断，再触发不同 CSS 的加载路径：
立即学习“前端免费学习笔记（深入）”；
- 用
require()（非import）实现动态引入：Webpack 能静态分析并 tree-shake 掉生产环境分支 - Vite 中必须用
import()动态导入，if (import.meta.env.DEV) { import('./debug.css') }才有效 - 避免在
.css文件里用@import拼接变量路径——CSS 不解析 JS，该语句会原样输出，构建失败或漏包
常见踩坑：样式顺序错乱 & 调试边框上线
开发时加的 outline: 1px solid red 如果没被构建阶段剔除，就会进生产包；更隐蔽的问题是样式注入顺序变化：
- 开发时用
style-loader内联样式，顺序由 JSimport顺序决定 - 生产时用
MiniCssExtractPlugin提取为<link>，加载顺序受 HTML 中标签位置和 HTTP 请求竞态影响 - 第三方 UI 库的样式在开发时可能被后置注入，生产时提前加载，导致覆盖关系反转
解决办法：所有环境敏感样式必须抽离成独立文件（如 debug.css），并确保只在非生产环境 require 或 import()；公共样式统一用 CSS 自定义属性管理，环境切换只改 :root 块。
最易被忽略的一点：构建工具不会自动帮你删掉开发专用样式——它只管打包你 require 或 import 的内容。所谓“环境区分”，本质是你主动把调试逻辑关进构建的笼子里，而不是指望 CSS 自己长出开关。
