应使用 app:// 协议注册自定义资源路径，因其能规避 chromium 对 file:// 的跨目录拦截、适配 .asar 打包及多层目录结构。需在 app.whenready() 后注册 protocol.registerfileprotocol('app', ...)，html 中写 ，并用 path.normalize() 安全解析路径。
直接用 <link rel="stylesheet" href="./styles/main.css"> 就行，但必须同时满足三个条件：HTML 和 CSS 物理路径关系与相对路径一致、主进程用 win.loadFile() 加载、打包后没写死绝对路径；不满足任一条件都会静默失败。
为什么 href="./styles/main.css" 有时报 “Not allowed to load local resource”
这不是路径写错了，是 Chromium 主动拦截——Electron 5+ 默认启用 webSecurity: true，对 file:// 协议下的跨目录资源请求做协议级拒绝。哪怕 fs.existsSync() 返回 true，浏览器仍不发请求，控制台只显示安全错误，不是 404。
- 开发时“偶尔能用”，往往因为 HTML 和 CSS 恰好同级，被宽松放行；打包进
.asar后大概率崩 -
win.loadURL('file://' + path.join(...))会让 Chromium 丢失当前目录上下文，相对路径彻底失效 - CSS 文件里用了
@import './theme.css'？它在.asar中常因路径解析失败而静默丢弃，不报错也不加载
preload.js 注入 CSS 字符串的实操要点
适合小量样式、主题切换或需运行时控制的场景，绕过所有协议限制，但不能替代主样式表。
- 必须在
BrowserWindow配置中启用preload，且推荐保持contextIsolation: true - 路径要用
path.join(__dirname, '../styles/main.css')—— 注意：__dirname是preload.js所在目录，不是 HTML 所在目录 - 打包后必须用
process.resourcesPath或app.getAppPath()替代__dirname，否则读不到.asar内部文件 - 注入时机必须等
document.addEventListener('DOMContentLoaded', ...)，不能在 preload 脚本顶部执行 - 大体积 CSS 建议用
readFileSync(..., 'utf8').trim()清掉 BOM，避免解析失败
注册 app:// 协议是唯一可扩展的长期方案
当项目结构复杂、CSS 分布在多层目录、或需要复用同一套资源映射逻辑时，硬靠相对路径会越来越难维护。
- 注册必须在
app.whenReady()之后、BrowserWindow创建之前调用protocol.registerFileProtocol('app', ...) - 回调里必须用
path.normalize()处理request.url.slice(6)拼出的路径，否则可能被..遍历攻击 - HTML 中写
<link rel="stylesheet" href="app://css/main.css">，不是file:// - 注册后需重启应用才生效；开发时加
console.log确认回调是否触发 - 不要在 preload 脚本里重复注册——
protocol是主进程全局行为
最容易被忽略的是路径上下文一致性：HTML 在 dist/app/index.html，却写 href="./styles/main.css"（实际应为 ../styles/main.css），这种错位在开发阶段可能不暴露，打包后才集中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
