Less变量编译后固化，无法运行时切换；必须用CSS变量（如--primary-color）配合JS的document.documentElement.style.setProperty()实现换肤，文件结构应遵循“编译期归一、运行时解耦”原则。
Less 文件不能替代 CSS 变量做运行时主题切换，必须用 var(--primary-color) + document.documentElement.style.setProperty() 实现换肤；文件结构设计核心是“编译期归一、运行时解耦”，不是堆文件夹。
Less 编译后变量就固化，别指望 JS 修改 @primary-color 能生效
你在 main.less 里写 @primary-color: #007bff;，Webpack/Vite 编译完，所有 color: @primary-color; 都变成硬编码的 color: #007bff;。JS 根本改不动——这不是 Electron 特性，是 Less 语言本身的编译行为。
常见错误是加个 :export 块，以为能导出变量供 JS 读取并影响样式：
:export {
primaryColor: @primary-color;
}
这只会生成一个 JS 对象，对 CSS 渲染零作用。想换肤？必须把颜色值“导出”为 CSS 自定义属性：
:root {
--primary-color: @primary-color;
}
然后在 JS 中调用：
document.documentElement.style.setProperty('--primary-color', '#1e88e5');
多窗口下 CSS 路径容易失效，统一走 preload.js 注入全局样式
主窗口加载 index.html，子窗口加载 windows/secondary.html，两者对 ./styles/main.css 的相对路径基准不同，打包进 app.asar 后更易 404。
解决方法不是修 HTML 里的 ，而是把真正跨窗口一致的样式（如主题变量、重置、字体栈）抽出来，在 preload.js 中注入：
- 用
fetch('app://./styles/global.css')或path.resolve(__dirname, '../styles/global.css')读取内容 - 创建
标签并插入document.head，避免 FOUC 和重复解析 - 禁用
nodeIntegration时，确保contextIsolation: true下仍能安全读取资源
组件级样式（如按钮、卡片）仍保留在各自模块中，不塞进全局。
Less 文件组织要服务编译目标，不是按“功能”堆目录
别一上来就建 components/、layouts/、themes/ 三层嵌套。Less 编译是静态过程，目录结构只影响可维护性，不影响运行时性能。
推荐最小可行结构：
-
styles/variables.less：只放@primary-color、@font-stack等基础变量，且每项都同步导出为--xxxCSS 变量 -
styles/reset.less：CSS 重置，不依赖变量，直接输出纯 CSS -
styles/global.less：@import 'variables'; @import 'reset';，作为唯一入口被preload.js加载 -
components/Button.less：组件样式，用var(--primary-color)引用，不 import 全局变量文件
这样既能复用变量语义，又避免组件样式被意外污染（比如某人误在 Button.less 里改了 @primary-color）。
构建工具配置要显式处理 Less，别依赖默认规则
Vite 默认支持 .less，但 Electron 项目常含 preload.js ——它不走 Vite 的 HMR 流程，修改 variables.less 不会自动刷新所有窗口。
关键配置点：
- 在
vite.config.ts中为preload指定build.rollupOptions.external，防止把 Node 模块打进 preload 包 - 给
styles/目录加resolve.alias，例如@styles: path.resolve(__dirname, 'src/styles')，让所有@import '@styles/variables'路径稳定 - 禁用
less的javascriptEnabled（默认 false），防止通过@import执行 JS 造成安全风险
最易忽略的是：Vite 开发服务器用 http:// 协议，而打包后 Electron 用 file:// 或 app://，fetch 资源时协议不一致会导致 CORS 或 404——务必在 preload.js 中区分环境拼接路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
