Less无法直接读取环境变量，必须通过构建工具（如Webpack的less-loader.modifyVars、Vite的lessOptions.modifyVars）将环境值作为全局变量注入，并结合if()函数实现条件样式；复杂场景推荐CSS自定义属性+JS运行时切换。
Less 中无法直接读取环境变量，必须借助构建工具链
Less 本身是静态预处理器，运行时（编译阶段）不接触 Node.js 环境变量或 Webpack 的 process.env。所谓“根据环境切换样式”，实际是构建工具（如 Webpack、Vite、Gulp）在调用 Less 编译器时，提前注入变量或替换占位符。直接在 .less 文件里写 @env: process.env.NODE_ENV 会报错 —— Less 解析器根本不认识 process.env。
可行路径只有一条：让构建工具把环境值作为 Less 全局变量传入。例如 Webpack 的 less-loader 支持 additionalData 或 modifyVars；Vite 的 lessOptions.modifyVars 同理。
- Webpack 用户优先用
less-loader的modifyVars配置，它会把键值对转为 Less 全局变量（类型自动转为字符串或数字） - Vite 用户在
vite.config.ts中配置css.preprocessorOptions.less.modifyVars，值同上 - 不要试图在 Less 文件里用
@import动态加载不同文件（如@import "theme-@{env}.less"），Less 不支持变量控制@import路径
用 modifyVars 注入环境变量并配合 if() 实现条件样式
Less 6.0+ 支持 if() 函数（需开启 strictMath=false，但现代版本默认已兼容）。结合 modifyVars 注入的 @env，就能做基础分支判断：
@env: "development"; // 构建工具注入，非手动写死
.header {
background-color: if(@env = "production", #1a1a1a, #f8f9fa);
padding: if(@env = "testing", 2rem, 1rem);
}
注意：if() 是表达式函数，返回值必须是合法的 CSS 值（不能是声明块）。如果逻辑复杂，建议拆成多个变量：
- 用
@isProd: @env = "production"提前定义布尔上下文 - 避免嵌套多层
if()，可读性差且易出错 -
modifyVars传入的字符串值会被 Less 当作标识符处理，所以务必用双引号包裹原始值（如{"env": "staging"}），否则 Less 会尝试解析未定义变量@staging
LessPlugin 并非官方方案，多数是过时或误导性概念
搜索 “LessPlugin 环境变量” 会出现一些老项目封装的 Webpack 插件（如 less-plugin-environment），但这些插件本质仍是包装 modifyVars 或在 additionalData 中拼接 @env: "...";。Less 官方从未提供名为 LessPlugin 的标准扩展机制 —— 它只有 Plugin API（需编写 JS 插件），但普通用户完全没必要自己实现。
真正该关注的是构建工具如何桥接环境与 Less：
- Webpack：确保
less-loader版本 ≥ 7.3.0，modifyVars才稳定支持字符串比较 - Vite：
modifyVars在vite-plugin-less中已内置，无需额外插件 - 直接用
lesscCLI？只能靠 shell 脚本拼接参数：lessc --modify-var="env=production" src/index.less
更可靠的做法：用 CSS 自定义属性 + JS 运行时切换
如果样式差异较大（比如整套主题色、字体栈、甚至布局方向），硬塞进 Less 条件逻辑反而难维护。此时推荐分层处理：
- Less 编译产出通用 CSS，其中所有可变值用
var(--primary-color)占位 - 构建时生成多份 CSS 变量定义文件（如
vars.prod.css、vars.dev.css），由 HTML<link>根据环境加载 - 或用 JS 在运行时注入：
document.documentElement.style.setProperty('--primary-color', '#2563eb') - 这样 Less 专注结构，环境逻辑交给更灵活的层，也规避了 Less 条件编译的隐蔽性问题
真正容易被忽略的是缓存：Webpack/Vite 默认会对 Less 输出做持久化缓存，改了 modifyVars 但没清缓存，旧样式可能一直生效。遇到样式不更新，先删 node_modules/.cache 或 .vite 目录。
