多窗口CSS易失效因路径基准不同、打包后路径变化、样式重复引入；需统一通过preload.js注入全局样式，IPC同步主题类名，并由主进程广播CSS变更以实现跨窗口一致。
Electron多窗口应用里，每个窗口是独立的Chromium渲染进程，index.html、secondary.html等页面各自加载自己的CSS——这意味着样式不会自动共享。你改了主窗口的main.css，辅助窗口若用的是aux.css，或者路径写错、打包后路径失效，立刻出现样式错乱、字体不一致、暗色模式失效等问题。
为什么在多窗口中容易失效？
看似只是加一行<link rel="stylesheet" href="./styles/main.css">，但实际踩坑点密集：
- 路径相对基准不同：主窗口
loadFile('index.html')时，./styles/main.css相对于index.html所在目录；而子窗口loadFile('windows/secondary.html')时，同样写./styles/main.css就可能指向错误位置 - 打包后资源路径变化：Vite/Electron-Builder打包后，HTML和CSS常被挪到
dist/或resources/app.asar内，./不再可靠 - 多个HTML文件重复引入同一份CSS，但未做去重，导致样式表多次解析、优先级混乱（尤其含
!important时）
统一CSS入口：用preload.js注入全局样式
绕过HTML中分散的<link>，直接在所有窗口共用的preload.js里注入CSS，确保“一次定义，处处生效”：
// preload.js
const cssContent = await fetch('app://./styles/global.css').then(r => r.text())
const style = document.createElement('style')
style.textContent = cssContent
document.head.appendChild(style)
关键点：
立即学习“前端免费学习笔记（深入）”；
- 使用
app://协议（需在webPreferences中启用enableRemoteModule: false并配合自定义协议注册，或改用file://+path.resolve拼接绝对路径） - 避免用
document.write或动态<link>，防止FOUC（闪白）或加载时机不可控 - 把真正需要跨窗口一致的样式（如主题色变量、重置样式、字体栈）放在这里；组件级样式仍保留在各自模块中
暗色模式/主题切换时如何同步CSS类名？
仅同步CSS文件不够——窗口A切到暗色模式，窗口B的<body>上没加dark类，照样不生效。必须联动DOM状态：
- 主进程维护一个
theme: 'light' | 'dark'状态，通过IPC广播给所有窗口 - 每个窗口的
preload.js监听该消息：ipcRenderer.on('theme-updated', (_, theme) => { document.body.className = theme }) - 不要在渲染进程里用
localStorage各自存主题——各窗口隔离，读不到彼此的值 - CSS中用
body.dark .button { background: #333 }这种结构，确保类名一变，样式立即响应
构建时CSS复用与热更新冲突怎么解？
开发时你希望修改global.css后所有窗口实时刷新，但Vite/HMR默认只触发热更新当前活动窗口。解决办法很直接：
- 在Vite配置中关闭CSS HMR的局部作用域：
css: { devSourcemap: true }（非必需），重点是让所有窗口监听同一个文件变更事件 - 更稳的方案：用主进程监听
global.css文件变化，再调用win.webContents.send('css-reload')通知每个窗口执行location.reload()或重新注入样式 - 生产环境无需处理——CSS已打包进ASAR，无热更需求
真正难的不是让样式“看起来一样”，而是让样式“行为一致”：路径不能依赖相对位置，主题不能靠本地存储，热更不能只刷当前窗口。这些细节一旦漏掉，多窗口就变成多套UI逻辑，维护成本翻倍。
