less 不支持运行时多品牌主题，必须通过编译期为每个品牌生成独立 css 文件：先导入品牌变量文件，再导入组件样式，确保变量作用域隔离且无硬编码。
直接说结论：Less 本身不支持“运行时多品牌主题”，所谓构建，本质是编译期生成多套独立 CSS 文件——每个品牌对应一个入口文件（如 brand-a.less），通过 @import 顺序控制变量注入，并确保所有组件样式只依赖抽象变量，不硬编码颜色/字体等值。
品牌变量必须抽离为独立文件且前置导入
品牌差异的核心是颜色、字体、圆角、间距等基础值，这些必须声明在单独的 variables-brand-a.less、variables-brand-b.less 中，且**必须在任何组件样式之前被导入**。否则组件编译时取到的是默认值或上一个品牌的残留值。
- 错误做法：
@import "components/button.less"; @import "themes/brand-b.less";→ button 已按 brand-a 编译完毕，brand-b 无效 - 正确顺序：
@import "themes/brand-b.less"; @import "components/button.less"; - 变量命名需带品牌前缀避免冲突，例如
@brand-b-primary-color，但更推荐统一用@primary-color+ 严格导入顺序来隔离 - Webpack 的
less-loader配置中，additionalData必须关闭，否则会全局注入变量，破坏品牌隔离
每个品牌需独立编译入口，不能共用同一份 Less
不要试图用 modifyVars 动态覆盖变量生成单个 CSS——它只输出一份结果，无法并存多个品牌样式。真实可行路径是为每个品牌建专属入口文件：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
brand-a.less：内容为@import "variables-brand-a.less"; @import "app.less"; -
brand-b.less：内容为@import "variables-brand-b.less"; @import "app.less"; -
app.less是共享逻辑，只含@import组件，不定义任何具体值 - 构建脚本并行执行：
lessc --js brand-a.less dist/brand-a.css和lessc --js brand-b.less dist/brand-b.css
组件内禁止硬编码，所有视觉属性必须来自变量
一旦组件里出现 #ff6b35 或 14px 这类字面量，该组件就失去品牌适配能力。变量引用必须干净、无歧义：
- 允许：
color: @text-primary;、border-radius: @border-radius-lg; - 禁止：
background: linear-gradient(to right, #3498db, #2c3e50);—— 应拆成@brand-gradient-start和@brand-gradient-end - 避免嵌套变量引用：
@hover-bg: darken(@primary-color, 10%);可行；但@hover-bg: @primary-hover-color;（未定义）会导致编译失败 - 字体族这类易出兼容问题的值，建议用 map 封装：
@font-family-brand-a: "PingFang SC", "Helvetica Neue", sans-serif;
主题切换不是 JS 改变量，而是换 CSS 文件
浏览器里没有 Less 编译器，less.js 仅用于开发调试，生产环境必须预编译。所谓“切换品牌”，实际是 JS 控制 <link> 标签的 href：
- 加载
brand-a.css时，DOM 里只有该品牌对应的全部样式规则 - 切换时移除旧 link，插入新 link，浏览器自然应用新样式
- 不要尝试用 JS 修改
document.documentElement.style.setProperty('--primary-color', ...)—— 这是 CSS 变量方案，和 Less 编译无关，且需额外桥接所有 Less 变量到--*，成本远高于多文件方案 - 如果项目已用 CSS 变量，那就不该用 Less 做品牌构建，应转向纯 CSS-in-JS 或 Vite 插件方案
真正容易被忽略的点在于：变量作用域不是“文件级”而是“导入链级”。哪怕你把 variables-brand-x.less 放得再规范，只要某处组件文件偷偷 @import 了另一个变量文件，整个链路就可能断裂。验证方式很简单——打开编译后的 CSS，搜 @primary-color 对应的值，看它是否真来自目标品牌文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
