modifyvars是less编译期配置项，用于在less.render()或less-loader中动态覆盖变量并触发样式重编译，不支持纯前端运行时换肤；它需配合构建流程实现主题切换，且键名必须带@符号、值为字符串，仅影响下一次编译。
Less变量不是CSS变量，modifyVars改的是编译时值
很多人以为 modifyVars 能像 CSS 自定义属性那样在运行时动态切换主题色，其实不是。它只是在 Less 编译阶段（比如 webpack 的 less-loader 或浏览器端的 less.render）把传入的对象合并进全局变量作用域，然后重新走一遍解析 → 编译 → 输出 CSS 流程。这意味着：每次调用 modifyVars 都会触发一次完整编译，不是“修改一个变量，样式立刻响应”，而是“生成一套新 CSS，再注入或替换旧样式”。
常见错误现象：modifyVars({ '@primary-color': '#1890ff' }) 调用了但页面没变 —— 很可能漏了后续的 CSS 替换逻辑，或者用在了不支持运行时编译的环境（如生产构建后已无 Less 解析器）。
- 适用场景：开发期主题预览、低频切换的后台系统主题（如深色/浅色）、CI 构建多主题包
- 不适用场景：高频切换（如用户每秒点一次颜色）、移动端 WebView 内频繁重编译（性能差、内存涨）
-
modifyVars只影响下一次编译；已生成的 CSS 不会自动更新，必须手动替换<style></style>标签内容或触发样式重载
Webpack 项目中配合 less-loader 使用 modifyVars 的正确姿势
webpack 配置里不能直接写 modifyVars，它属于 less 实例的 API，需通过 less-loader 的 lessOptions 透传，且仅对「每次模块构建」生效 —— 换句话说，它不是热更新变量，而是构建时静态注入。
真正能实现“开发期动态换肤”的组合是：less-loader + modifyVars + webpack HMR（热模块替换）+ 自定义 loader 或插件来捕获变量变更并触发重编译。
- 基础配置示例（
webpack.config.js）：module: { rules: [{ test: /\.less$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { '@primary-color': '#1890ff', '@border-radius-base': '2px' }, javascriptEnabled: true } } }] }] } - 注意：
modifyVars在这里是一次性配置，改了要重启 webpack dev server 才生效；如需运行时切换，得自己封装一个 HMR-aware 的 less 加载器，监听变量变化并调用less.render+ 替换<style></style> -
javascriptEnabled: true必须开启，否则@{xxx}插值和函数（如fade(@primary-color, 85%)）会报错
浏览器端运行时调用 less.modifyVars() 的前提与限制
Less 官方提供了浏览器端的 less.modifyVars() 方法，但它依赖全局 less 实例，并且只在启用 useFileCache: false 和 async: true 时才真正触发重编译 —— 否则它只是缓存变量，不干活。
典型失败操作：less.modifyVars({'@bg': '#000'}); 后样式没变，因为没等 less.refreshStyles() 或没处理 Promise 返回。
- 必须确保引入的是完整版
less.min.js（非精简版），且版本 ≥ 3.10.0 - 调用后要显式处理返回的 Promise：
less.modifyVars({'@primary-color': '#722ed1'}).then(() => { // 此时新 CSS 已生成，但尚未插入 DOM less.refreshStyles(); // 才真正替换 <style type="text/css" data-type="less"> });</style> - 所有 Less 文件必须带
data-less属性（或type="text/less"），否则refreshStyles()找不到目标 - 性能敏感：每次调用都会重新 parse 所有
<style></style>和<link>中的 Less，大项目卡顿明显
想模拟 CSS 变量的响应式效果？得靠两层抽象
纯 Less 无法做到 CSS 自定义属性那种级联、继承、getComputedStyle 读取的能力。真要逼近这种体验，只能把 Less 当“模板生成器”，输出含 CSS 变量的 CSS，再用 JS 控制变量值 —— 即 Less 负责结构，CSS 变量负责动态部分。
例如：theme.less 里写：
:root {
--primary-color: @{primary-color};
--border-radius: @{border-radius-base};
}，然后在 JS 里 document.documentElement.style.setProperty('--primary-color', '#52c418')。
- 好处：切换零编译开销，完全复用 CSS 变量机制，支持动画、媒体查询、伪类响应
- 代价：Less 只剩“占位”作用，主题逻辑从 Less 移到 JS/CSS；
modifyVars退化为初始化工具 - 容易被忽略的坑：Less 编译后
:root规则若被其他 CSS 覆盖（如第三方库的:root{--primary-color:red}），JS 设置就会失效；建议加!important或用更高优先级选择器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
