loadfile() + 相对路径是最稳的起点：必须用 win.loadfile('src/index.html')，避免 loadurl 导致路径上下文丢失；相对路径绕过跨域限制，且打包进 .asar 后仍有效，前提是禁用绝对路径。
用 loadFile() + 相对路径是最稳的起点
Electron 渲染进程加载本地 CSS，最不容易出错的方式就是让 Chromium 自己解析文件路径——这要求你必须用 win.loadFile('src/index.html')，而不是 win.loadURL('file://' + path.join(...))。后者会让 Chromium 丢失当前目录上下文，./styles/main.css 立刻失效。
相对路径能绕过跨域拦截，是因为它不触发 file:// 协议的跨目录限制；Chromium 把 ./styles/main.css 当作同项目树内的常规文件读取，走的是本地文件系统解析流程，不是网络请求。
- HTML 和 CSS 的物理位置必须严格匹配 href：比如
index.html在src/下，CSS 在src/styles/main.css，href 就写./styles/main.css - 打包进
.asar后仍有效，前提是没在代码里硬编码成/Users/xxx/app/styles/main.css这类绝对路径 -
@import在 CSS 文件里慎用：浏览器执行时无法解析 asar 内部路径，@import './theme.css'在打包后会静默失败
preload.js 注入 CSS 字符串适合运行时控制
当你需要动态切换主题、夜间模式或热更新样式时，preload.js 中读取并注入 CSS 字符串比重载整个样式表更可控。它不发任何 HTTP 或 file 请求，完全绕过协议和路径限制。
但注意这不是主样式表的替代方案，只适合小量、高优先级、需 JS 干预的样式逻辑。
- 路径要用
path.join(__dirname, '../styles/dark.css')——__dirname指的是preload.js所在目录，不是 HTML 所在目录 - 打包后必须改用
process.resourcesPath或app.getAppPath()，否则fs.readFileSync读不到 asar 内部文件 - 注入时机必须等
document.addEventListener('DOMContentLoaded', ...)，不能在 preload 脚本顶部就执行，否则document.head还不存在 - 读取文件后建议加
.trim()去 BOM，否则含 UTF-8 BOM 的 CSS 可能解析失败
多窗口场景下别靠 HTML 重复引入 CSS
每个 BrowserWindow 是独立渲染进程，index.html 和 settings.html 各自写一遍 <link rel="stylesheet" href="./styles/main.css"> 看似省事，实则埋雷：路径基准不同、打包后目录偏移、样式表重复解析导致优先级混乱（尤其带 !important 时）。
统一入口才是高效管理的关键。
- 把全局一致的样式（字体栈、重置规则、CSS 变量定义）抽到一个
global.css，只在 preload.js 中注入一次 - 组件级或页面专属样式，保留在各自 HTML 或 JS 模块中，避免污染全局
- 暗色模式切换时，仅同步
body类名（通过 IPC 广播），不要每个窗口自己读配置——localStorage 不跨窗口，sessionStorage更不行
别碰“系统原生 CSS”这种伪概念
Electron 里没有 system.css 或 native.css 这种文件。所谓“原生感”，来自 Chromium 对标准元素的 UA 样式（如 button、input）、操作系统字体栈和 prefers-color-scheme 媒体查询的支持，不是靠引入某个外部 CSS 实现的。
试图从 /System/Library/Fonts/ 或 C:\Windows\Fonts\ 加载样式，路径不可移植、权限受限、asar 打包后直接失效；写 href="file:///etc/some-os-styles.css" 则会被 webSecurity: true 立即拦截，且根本不存在这类文件。
- 真正起效的是：用
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif继承系统字体 - 响应
@media (prefers-color-scheme: dark)，而不是手动加dark类再写一堆覆盖规则 - 定制滚动条只能用
::-webkit-scrollbar系列伪类，它只在 Chromium 生效，别指望通用
最常被忽略的其实是路径基准问题：开发时 loadFile('src/index.html') 和打包后 loadFile('dist/index.html') 的相对路径指向完全不同，而很多人只在一种环境下验证过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
