Less变量无法运行时修改，必须通过CSS自定义属性（如--primary-color）桥接：Less中用@primary: var(--primary-color, #409EFF)声明，JS通过document.documentElement.style.setProperty('--primary-color', '#222')动态切换。
Less 变量必须在构建时注入，runtime 无法直接修改 @variable
Less 是预处理器，所有 @primary-color 这类变量都在编译阶段被替换成具体值，生成的 CSS 里根本不存在变量名。所以你不能在 JS 里写 less.modifyVars({ '@primary-color': '#ff0000' }) 然后期望页面立刻变色——这在 Vite 开发模式下完全不生效，modifyVars 仅作用于构建（vite build）时的 Less 编译流程。
动态切换只能靠 CSS 变量（--xxx） + JavaScript 实时设置
真正能 runtime 切换的，只有原生 CSS 自定义属性。Less 文件里得用 @background: var(--background, #fff); 这种写法把 CSS 变量“桥接”进来，再由 JS 控制 document.documentElement.style.setProperty('--background', '#222')。
- 所有主题色、背景、字体等都得先声明为
var(--xxx)，不能直接写死@color - 推荐统一在
src/assets/styles/variables.less中集中定义：@primary: var(--primary-color, #409EFF); - 组件内样式仍用
@primary，但最终渲染依赖的是--primary-color的当前值 - 注意：CSS 变量区分大小写，
--Primary-Color和--primary-color是两个变量
vite.config.ts 中 Less 配置的关键点
不是加个 less 插件就行，Vite 默认不开启 Less 的 JS 支持，modifyVars 或 javascriptEnabled: true 必须显式配置，否则 var() 在 Less 里会被忽略。
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "@/assets/styles/variables.less";`
}
}
}
-
javascriptEnabled: true是硬性要求，否则var(--x)在 Less 中解析失败，报错Inline JavaScript is not enabled -
additionalData保证每个.less文件和<style lang="less">都自动引入变量文件，避免重复@import - 路径必须是绝对路径（以
@/开头），相对路径在组件内会失效
切换主题时别漏掉 :root 和第三方组件库
Element Plus、Ant Design Vue 这些库默认不读取你设的 --xxx，它们要么用 SCSS 变量覆盖（如 Element Plus），要么依赖 Less 的 modifyVars 构建时注入（如 AntD Vue）。如果你混用，主题很可能只改了自己写的样式，按钮、表单等还是旧色。
立即学习“前端免费学习笔记（深入）”；
- AntD Vue 项目：必须用
@zougt/vite-plugin-theme-preprocessor这类插件，在构建时生成多套主题 CSS，JS 层只是切换<link>标签 - Element Plus 项目：官方只支持 SCSS 覆盖，用 Less 就得手动重写所有
el-*组件的background/color，或转用 SCSS - 自己写的组件：确保所有颜色都经过
var(--x)桥接，且初始值设在:root里，例如：:root { --primary-color: #409EFF; }
最易被忽略的是：切换主题后，:root 更新了，但某些组件用了 !important 或内联 style，会覆盖 CSS 变量；还有 SSR 渲染时服务端没同步设置 --xxx，首屏闪动明显。
