CSS变量无法通过env()读取项目环境变量，因env()仅支持safe-area-inset-*等系统级参数；自定义变量如VITE_DEBUG需由构建工具（Vite/Webpack）在编译时注入Sass/Less变量或JS动态设置CSS自定义属性。
CSS变量本身不能直接读取环境变量，必须靠构建工具在编译时注入值——否则你写的env('VITE_DEBUG')或process.env.NODE_ENV在浏览器里根本不存在。
为什么:root { --debug: env('VITE_DEBUG'); }会失效
CSS 标准里的 env() 函数只支持少数几个系统级环境变量（如 safe-area-inset-top），不支持自定义环境变量。你在 .env 里写的 VITE_DEBUG=true 不会被 CSS 解析器识别，浏览器只会把 --debug: env('VITE_DEBUG'); 当作无效声明，最终计算为 unset 或空值。
- 浏览器控制台查
getComputedStyle(document.documentElement).getPropertyValue('--debug')，大概率返回空字符串 - PostCSS 插件（如
postcss-env-function）可以模拟这个行为，但需显式配置且不兼容原生 CSS 解析 - 真想用
env()，只能传系统级变量，比如 iOS 安全区域，跟开发/生产无关
Vite 中用 define + Sass/Less 注入布尔值
Vite 的 define 配置能把 JS 常量提前内联进代码，Sass/Less 可以在编译时读取它做条件判断——这才是真正生效的路径。
- 在
vite.config.ts里加：define: { __DEV__: JSON.stringify(import.meta.env.DEV) } - Sass 文件中写：
@if __DEV__ { body { outline: 1px solid red; } } - Less 文件中写：
.when(@__DEV__ = true) { body { outline: 1px solid red; } }，前提是modifyVars把@__DEV__传进来了 - 注意：Sass 的
#{__DEV__}是字符串插值，不能当布尔用；要用@if判断，变量得是 Sass 原生类型（所以推荐用define注入后，在 Sass 里再转成$is-dev: __DEV__ == 'true';）
Webpack + CSS Modules + 自定义属性 fallback 方案
如果你不用预处理器，又想保持 CSS 文件干净，可以用 JS 注入 :root 变量作为 fallback，再让 CSS 依赖它。
- 在入口 JS 最顶部执行：
document.documentElement.style.setProperty('--env', process.env.NODE_ENV); - CSS 中写：
body { background-color: var(--env, 'dev') == 'prod' ? #fff : #f0f0f0; }—— 不行，CSS 不支持三元表达式 - 正确做法是分两套规则：
body.dev { background-color: #f0f0f0; } body.prod { background-color: #fff; }，然后 JS 根据process.env.NODE_ENV给body加对应 class - 更轻量的是只注入一个开关：
:root { --is-dev: 1; }（开发）或:root { --is-dev: 0; }（生产），然后用body::before { content: var(--is-dev); }辅助调试，但无法驱动逻辑分支
最容易被忽略的一点：变量注入 ≠ 样式剔除
就算你成功把 --is-dev: 1 注入了，所有带 var(--is-dev) 的样式依然会打包进生产文件——CSS 没有 tree-shaking。真正安全的做法是：把开发专用样式（比如组件 hover 边框、数据标签）单独抽到 debug.css，只在 import.meta.env.DEV 为 true 时 import('./debug.css')。构建工具会静态分析并彻底删掉生产分支，连字节都不会多占。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
