modifyVars 是 Less 编译期配置项，用于在 less.render() 或 less-loader 中动态覆盖 Less 变量值，实现构建时主题切换；它不支持纯前端运行时换肤，本质是触发样式重编译。
modifyVars 是什么，它在 Less 编译中起什么作用
modifyVars 是 Less 官方提供的一个编译期配置项，用于在调用 less.render() 或通过构建工具（如 webpack 的 less-loader）编译 Less 时，动态覆盖 Less 源文件中已定义的变量值。它不是运行时 JS 修改 CSS 变量，而是「重新编译一次样式」——所以严格来说，modifyVars 本身不支持纯前端运行时切换（无刷新、无重编译），但它能配合服务端或构建流程实现主题预设切换。
常见误解是以为 modifyVars 能像 CSS 自定义属性那样实时生效；实际它只在 Less 编译阶段起效。如果你用的是 antd、arco-design 等基于 Less 的 UI 库，它们的 theme 配置底层就是靠 modifyVars 注入新颜色值后触发样式重建。
webpack + less-loader 中正确使用 modifyVars 切换主题
在 webpack 构建流程中，modifyVars 必须写在 less-loader 的 options 里，且需确保它被实际传入 Less 编译器。容易出错的点在于：变量名拼写错误、嵌套层级没对齐、JSON 字符串未转义、或修改后没触发热更新。
-
modifyVars的值必须是 plain object，键名要和 Less 源码中@primary-color这类变量名完全一致（包括@符号） - 如果主题色定义在
variables.less中，确保该文件被@import进主样式入口，否则modifyVars覆盖无效 - 开发时开启
less-loader的javascriptEnabled: true（某些旧版 antd 主题依赖 JS 函数） - 示例配置片段：
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#1890ff',
'@link-color': '#1890ff',
'@border-radius-base': '2px'
}
}
}
}
为什么直接在浏览器里调用 less.render() + modifyVars 无法“实时”换肤
Less 是一门编译型语言，less.render() 在浏览器中执行时，会把整个 Less 字符串解析、计算、生成 CSS 字符串，再插入 标签。这个过程耗时且不可逆——你不能只改一个变量就局部刷新样式，必须重传全部 Less 源码 + 新 modifyVars，再完整重渲染。
- 每次调用
less.render()都会生成全新 CSS，旧标签得手动移除，否则样式会叠加冲突 - 大型项目 Less 文件常有几十个
@import，全量字符串传输和解析在低端设备上明显卡顿 - 没有 source map 支持，报错定位困难；且
less.js浏览器版体积超 300KB，影响首屏 - 真正可行的“运行时”方案其实是：提前构建多套 CSS 文件（如
theme-dark.css、theme-blue.css），用 JS 切换标签，而非依赖modifyVars
想做到真·运行时主题切换？绕过 Less，用 CSS 自定义属性
如果你的目标是用户点击按钮立刻变色、不刷新、不重加载，modifyVars 不是答案。应该把主题色从 Less 变量迁移到 CSS 自定义属性（:root），再用 JS 动态改 document.documentElement.style.setProperty()。
- 把原 Less 中的
@primary-color替换为var(--primary-color)，并在 :root 中定义默认值 - 所有组件样式保持用
var(--primary-color)，避免硬编码或 Less 变量引用 - 切换主题时只需：
document.documentElement.style.setProperty('--primary-color', '#52c418');
document.documentElement.style.setProperty('--bg-color', '#f0f2f5');
这种方案兼容性好（Chrome 49+、Firefox 31+、Safari 9.1+），性能开销极小，且与 Less 构建流程解耦。Less 的 modifyVars 只适合构建时确定的主题包，别把它当运行时 API 用。
真正难的不是怎么写 modifyVars，而是判断清楚：你要的到底是构建时主题打包，还是运行时样式注入——选错路径，后面所有调试都在对抗工具链本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
