Less中如何根据环境切换样式？

在 Less 中无法直接读取环境变量，必须通过 Webpack、Vite 等构建工具的 `modifyVars` 配置将环境值（如 `"production"` 或 `"development"`）作为全局变量注入 Less 编译上下文，再结合 `if()` 函数实现基础条件样式；但面对复杂主题切换时，更推荐解耦设计——用 Less 维护样式结构，CSS 自定义属性（`var(--color)`）承载可变值，并由 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 中已内置，无需额外插件
• 直接用 lessc CLI？只能靠 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 根据环境加载
• 或用 JS 在运行时注入：document.documentElement.style.setProperty('--primary-color', '#2563eb')
• 这样 Less 专注结构，环境逻辑交给更灵活的层，也规避了 Less 条件编译的隐蔽性问题

真正容易被忽略的是缓存：Webpack/Vite 默认会对 Less 输出做持久化缓存，改了 modifyVars 但没清缓存，旧样式可能一直生效。遇到样式不更新，先删 node_modules/.cache 或 .vite 目录。

本篇关于《Less中如何根据环境切换样式？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！