Less变量无法运行时切换，必须通过CSS自定义属性（如--primary-color）实现动态换肤：编译后@primary-color固化为固定值，JS需调用setProperty修改:root下的CSS变量，并在样式中统一使用var(--primary-color)引用。
Less变量不能动态切换，必须靠CSS自定义属性兜底
你在@primary-color: #007bff里改颜色，编译完就固定成color: #007bff了，运行时JS根本改不动。想换肤、切暗色模式，得把Less变量“导出”为--primary-color这类CSS变量，再用document.documentElement.style.setProperty('--primary-color', '#1e88e5')去改。
常见错误是只写:export块，以为JS能读到就能影响样式——其实:export只生成JS对象，对CSS渲染零作用。你必须额外在:root里显式声明：
code
:root {
--primary-color: @primary-color;
--bg-color: @bg-color;
}
否则var(--primary-color)永远是undefined。
主题类名 + CSS变量双驱动，避免样式覆盖混乱
光有--primary-color还不够。比如你希望暗色模式下.button背景变深，但又不想全局重写所有选择器，就得结合类名控制作用域：
body.theme-dark .button { background-color: var(--bg-color); }body.theme-light .button { background-color: var(--bg-color-light); }
这样JS只需切换document.body.className = 'theme-dark'，所有组件自动响应。别用!important硬顶，容易和组件内联样式打架；也别在每个组件里重复写body.theme-dark & { ... }，维护成本爆炸。
关键点：
- Less里只定义源变量（
@primary-color）和:root映射，不写具体样式规则 - 所有组件样式统一用
var(--xxx)，禁用直接引用@xxx - 主题类名由主进程IPC广播，preload.js统一监听并更新
body.className
打包后路径失效？用__dirname拼绝对路径加载CSS
Electron打包进app.asar后，./styles/theme.less这种相对路径会404。Vite或Webpack构建时，Less文件已编译进CSS bundle，但如果你在运行时用fetch('app://./styles/dark.css')动态加载，就得确保协议和路径正确。
更稳妥的做法是：在preload.js里用path.join(__dirname, '../dist/styles/dark.css')拼出绝对路径，再用fs.readFileSync读取内容注入。注意两点：
- 启用
nodeIntegration: false时，fs不可用，必须通过preload暴露安全API，或改用require('node:fs').readFileSync（Electron ≥23） - 别用
document.write，会导致FOUC；用document.head.appendChild(styleEl)保证同步插入 - 如果用了Vite，
import.meta.env.BASE_URL比硬编码路径更可靠
Vue/Electron项目中Less全局变量怎么注入到所有组件
Vue单文件组件里想直接用@primary-color，不能靠import './theme.less'——它只在当前SFC生效。得用sass-resources-loader（名字带sass但支持less）把变量注入所有块：
在vue.config.js或Webpack配置里加：
code
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, 'src/assets/less/variables.less')
}
}
注意：resources必须是绝对路径，path.resolve不能少。否则Vue Loader找不到文件，编译不报错但变量全undefined。另外，这个方案只影响构建期Less编译，和运行时主题切换无关——它解决的是“开发期写代码爽”，不是“用户点击换肤”。
真正动态的部分，还是得回到--xxx变量 + JS控制那一套。两套机制各司其职，混用反而容易踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
