electron 5+ 默认启用 websecurity 阻止 file:// 跨目录加载 css，应使用相对路径（如 ./styles/main.css）或注册 app:// 协议映射本地文件，禁用 websecurity 不安全且不推荐。
直接用 file:// 协议或绝对路径引入 CSS 文件，在 Electron 5+ 中默认会失败，不是路径问题，是安全机制主动拦截。
为什么 file:///absolute/path/to/style.css 会报错 “Not allowed to load local resource”
Electron 默认启用 webSecurity: true，它会阻止渲染进程从 file:// 协议跨目录加载资源（包括 CSS、JS、字体），哪怕路径完全正确。控制台看到的错误不是 404，而是 CSP 或安全策略拒绝加载。开发时偶尔“能用”，往往是因为路径恰好在同级目录下被宽松放行，但上线后极易崩。
- 这不是 Node.js 路径解析问题，
fs.existsSync()返回true也不代表浏览器能加载 -
__dirname和path.join()在主进程有效，但在 HTML 的href属性里无法执行 - 关掉
webSecurity: false是高危操作，不推荐用于生产环境
用相对路径 ./styles/main.css 是最简且可靠的方式
只要目录结构清晰、HTML 和 CSS 在同一项目树中，相对路径由 Chromium 原生支持，无需额外配置，也不触发安全拦截。
- 确保
index.html和styles/main.css的物理位置关系与路径一致（例如都在src/下） - 主进程用
win.loadFile('src/index.html')加载，而不是loadURL('file://...') - 打包进 asar 后仍有效——Electron 会自动解包并映射相对路径
- 避免
@import嵌套引用，它可能在 asar 环境中解析失败
需要动态路径或跨目录引用时，用 protocol.registerFileProtocol 注册 app://
这是官方推荐的、可复用的绕过方案：把本地文件映射到自定义协议，再在 HTML 中用 href="app://css/main.css" 引入。
- 注册必须在
app.whenReady()之后、BrowserWindow创建之前完成 -
request.url.slice(6)是为去掉app://前缀，注意路径拼接要用path.normalize()防止遍历攻击 - 注册后需重启应用才生效，开发时可加
console.log确认回调是否触发 - 不要在 preload 脚本里重复注册，protocol 是主进程全局行为
preload 脚本注入 CSS 仅适用于小量样式或运行时逻辑
通过 document.head.appendChild() 插入 <style></style> 或 <link>，适合主题切换、暗色模式等场景，但不适合主样式表。
- 注入的
<link>仍不能写file://，得先用fs.readFileSync读成字符串，转成data:text/css;base64,... - 大量 CSS 字符串拼接易出错，且无法利用浏览器缓存和 source map 调试
- 如果用了
contextIsolation: true（推荐），必须通过contextBridge暴露方法，不能直接操作document
真正容易被忽略的是：路径是否“物理存在”和“能否被 Chromium 加载”是两回事；file:// 协议在 Electron 里从来就不是设计用来直接暴露给渲染进程的通道。选相对路径或 app://，别在安全开关上找捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
