electron 5+ 默认启用 websecurity: true，会拦截 file:// 协议下跨目录加载 css 等本地资源，即使路径正确、fs.existssync() 返回 true，也会报 “not allowed to load local resource”；必须满足三个条件：html 与 css 物理位置关系同相对路径一致、主进程用 loadfile 而非 loadurl 加载、打包进 asar 后路径不能写死；替代方案是注册 app:// 协议。
为什么css">在Electron里有时不生效
不是路径写错了，而是 Chromium 对 file:// 协议下跨目录资源加载做了限制——哪怕 fs.existsSync() 返回 true，浏览器仍会拦截。Electron 5+ 默认启用 webSecurity: true，它把 ./styles/main.css 解析为相对 URL 后，最终仍走 file:// 协议请求，一旦 CSS 文件和 HTML 不在同一级目录（比如 HTML 在 src/、CSS 在 src/styles/），就可能被拒绝，控制台报 Not allowed to load local resource。
确保相对路径能用的三个硬性条件
相对路径本身没问题，但必须同时满足：
-
index.html和styles/main.css的物理位置关系，必须与href中写的路径完全一致（例如两者都在src/下，且 HTML 里写的是./styles/main.css） - 主进程必须用
win.loadFile('src/index.html')加载，而不是win.loadURL('file:///...')—— 后者会让 Chromium 丢失当前目录上下文，相对路径解析失效 - 打包进
.asar后仍有效，前提是路径没写死成绝对路径；Electron 会在运行时自动解包并映射相对路径，无需额外配置
常见翻车点：@import、嵌套引用、preload 脚本里误用
即使 <link> 本身用了相对路径，也容易被间接破坏：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
@import在 CSS 文件内部引用其他 CSS，在.asar环境中常因路径解析失败而静默丢弃，建议扁平化合并或改用 JS 动态加载 - 在
preload.js里试图用document.createElement('link')并设href="file:///xxx"—— 这条路依然被拦截，preload不能绕过协议限制，只能读文件内容再注入<style></style> - HTML 文件被放在子目录（如
dist/app/index.html），但 CSS 路径仍写./styles/main.css，实际应为../styles/main.css或统一调整项目结构
相对路径之外最稳的替代方案：app:// 协议注册
当目录结构复杂、CSS 需跨多层引用，或你无法保证 HTML 总在固定位置时，相对路径就不可靠了。这时应该用主进程注册自定义协议：
- 必须在
app.whenReady()之后、创建BrowserWindow之前调用protocol.registerFileProtocol('app', ...) - 回调里用
path.normalize(`${__dirname}/${request.url.slice(6)}`)拼路径，防止..跳出根目录 - HTML 中改写为
<link rel="stylesheet" href="app://css/main.css">，这个协议走的是 Electron 允许的通道，天然兼容 asar 和开发环境 - 注册后需重启应用才生效，开发时加
console.log('app:// registered')确认是否触发
真正难的不是选哪种方式，而是搞清“路径”在 Electron 里其实横跨三层：Node.js 的 __dirname、Chromium 的 file:// 解析规则、以及 asar 打包后的虚拟文件系统。漏掉任何一层，相对路径就只是看起来对而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
