webpack无法在css中直接用env()读取构建环境变量，因css解析器不接触构建上下文；可靠方案是通过defineplugin将环境变量注入js，再由js动态设置:root自定义属性或body类名实现样式控制。
Webpack里不能直接用env()注入CSS变量
浏览器原生的env()函数只认safe-area-inset-top这类系统级参数，你写的VITE_DEBUG或NODE_ENV在CSS里写--mode: env('NODE_ENV')完全无效。构建后查getComputedStyle(document.documentElement).getPropertyValue('--mode')，返回空字符串是常态。
根本原因：CSS解析器不接触构建工具的环境上下文，它只处理最终生成的CSS文本。所谓“注入”，必须发生在编译阶段或运行时JS桥接阶段。
用DefinePlugin + JS动态设置:root变量最可靠
这是目前兼容性最好、逻辑最清晰的路径：Webpack在打包时把环境值硬编码进JS，再由JS一次性写入:root自定义属性。
- 在
webpack.config.js中配置DefinePlugin：new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) - 在项目入口JS（如
src/index.js）顶部执行：document.documentElement.style.setProperty('--env', process.env.NODE_ENV) - CSS中即可安全使用：
body { background-color: var(--env) == 'production' ? #fff : #f0f0f0; }——等等，这句不行，CSS不支持三元运算 - 正确写法是分层控制：
body.dev { background-color: #f0f0f0; } body.prod { background-color: #fff; }，然后JS根据process.env.NODE_ENV给body加对应class
Less/Sass预处理器配合modifyVars做编译期注入
如果你用Less或Sass，且主题切换频率低（比如整站换肤），可以用构建时覆盖变量的方式，但要注意这不是“动态”，而是重新编译。
- Webpack中配置
less-loader的lessOptions.modifyVars：{ '@env': JSON.stringify(process.env.NODE_ENV) }（注意键名带@） - Less文件中写：
@env == 'production' { .btn { color: red; } }，Sass同理用@if - 修改
modifyVars后必须重启dev server，HMR不会自动响应变量变更 - 别在Vue单文件组件的
<style lang="less"></style>里手动@import变量文件——会导致重复解析，应统一用additionalData前置注入
容易被忽略的关键点
变量注入 ≠ 样式剔除。Webpack把process.env.NODE_ENV === 'development'替换成true，但CSS里写的.dev-only { display: none; }并不会因为环境是prod就被自动删掉——它还在那里，只是没被用到。真正剔除无用样式得靠PurgeCSS这类工具，和变量注入是两件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
