less无法读取node_env，需构建工具注入变量；webpack用less-loader的modifyvars，vite需配置css.preprocessoroptions.less.modifyvars；命令行用lessc --modify-var；if()仅支持单值分支，@import不支持变量路径，连字符变量名需转下划线，须验证注入是否生效。
Less 无法运行时读取 NODE_ENV，必须靠构建工具注入
Less 是纯静态预处理器，编译阶段不接触 Node.js 环境或 Webpack 的 process.env。你在 .less 文件里写 @env: process.env.NODE_ENV; 会直接报错 Unrecognised input——Less 解析器根本不认识 process.env。真正起作用的，只有构建工具（Webpack/Vite）在调用 Less 编译器时传入的变量。
- Webpack 用户必须配置
less-loader的modifyVars选项，例如：{ env: process.env.NODE_ENV === 'production' ? "'prod'" : "'dev'" }，注意字符串值要套单引号，否则 Less 会当成未定义变量解析 - Vite 用户需在
vite.config.ts中设置css.preprocessorOptions.less.modifyVars，且确保环境变量已透传（.env中的VITE_ENV不会自动进 Less，得靠插件或启动脚本中转） - 命令行编译用
lessc --modify-var="env='dev'" main.less，生产时换为env='prod'
用 if() 函数做基础样式分支，但别嵌套太深
if() 是 Less 6.0+ 原生支持的表达式函数，配合 modifyVars 注入的 @env 可实现简单条件逻辑，但它返回的是单个 CSS 值，不是声明块。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 合法写法：
background-color: if(@env = "production", #1a1a1a, #f8f9fa); - 错误写法：
if(@env = "dev") { .debug-overlay { display: block; } }—— 这种块级条件语法不存在，编译直接失败 - 复杂逻辑建议拆解：先定义布尔上下文，如
@isProd: @env = "production";，再在各属性中复用，避免多层if(if(...)) - 所有
if()返回值必须是合法 CSS 值（颜色、长度、数字等），不能是空、undefined或无效标识符
@import 不支持变量路径，别指望它按环境加载不同文件
@import "theme-@{env}.less"; 或 @import (when (@env = 'dev')) 'dev-vars.less'; 全部非法。Less 的 @import 是编译前静态解析，不支持任何运行时或变量插值，遇到这种写法会报 Unrecognised input。
- 正确做法：把所有环境共用变量统一写进一个入口
variables.less，再通过modifyVars覆盖关键值（如@primary-color） - 想物理分离文件？只能靠构建工具动态拼接
additionalData，例如 Webpack 中用 JS 拼出@import 'themes/@{env}.less';再注入，但这本质仍是提前确定路径，不是 Less 自己解析 - 变量名含连字符（如
bg-color）传参会失败，必须改用下划线：--modify-var="bg_color=#fff"
调试时确认变量是否真被注入，别信“配置写了就生效”
Webpack/Vite 配置写对了，不代表 modifyVars 就进了 Less 编译流程。常见失效场景包括：loader 链顺序错（less-loader 必须在 css-loader 之前）、MiniCssExtractPlugin 导致 loader 配置被跳过、Vite 中 lessOptions 放错位置（必须在 css.preprocessorOptions 下）。
- 快速验证：在样式末尾加临时规则
body::before { content: "@{env}"; }，看浏览器渲染出的值是否符合预期 - 检查编译日志，确认 less-loader 是否实际收到
modifyVars参数（Webpack 5+ 可开stats: 'verbose'） - 变量覆盖只在同一个编译上下文生效：如果
theme.less是独立编译的，modifyVars对它无效；必须确保它是被主入口@import进来的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
