答案：因chromium在file://协议下主动拦截跨目录请求，需同时满足三条件——html与css物理路径关系同相对路径一致、主进程用loadfile而非loadurl加载、打包后路径未写死为绝对路径。
用相对路径加载 CSS 为什么有时报 “Not allowed to load local resource”
不是路径写错了，是 Chromium 在 file:// 协议下主动拦截跨目录资源请求。Electron 5+ 默认启用 webSecurity: true，哪怕 fs.existsSync() 返回 true，浏览器仍拒绝加载 ./styles/main.css —— 控制台错误是安全策略拒绝，不是 404。
能用的硬性条件有三个：
-
index.html和styles/main.css的物理位置必须与 href 中路径完全一致（例如都在src/下） - 主进程必须用
win.loadFile('src/index.html')，不能用win.loadURL('file://...')（后者丢失当前目录上下文） - 打包进
.asar后仍有效，前提是路径没写死成绝对路径；Electron 会自动解包并映射相对路径
用绝对路径拼接 file:// 协议的风险和限制
写 href="file://${path.join(__dirname, 'dist', 'styles.css')}" 看似直接，但问题不少：
- 开发时可能成功，但打包后
.asar内部路径失效，file://无法访问 asar 包内文件 - Electron 22+ 对
file://源更严格：CSP 中必须显式声明style-src 'self' file://，且file://后必须跟完整绝对路径，不能是file://./dist/styles.css - 路径拼接若未用
path.normalize()，可能被..绕过导致读取任意文件（安全漏洞） - Windows 下路径分隔符、URL 编码（空格、中文）容易出错，
file://C:\path\style.css需转义为file:///C:/path/style.css
preload.js 注入 CSS 字符串是最轻量的绕过方案
它不依赖外部 HTTP/file 请求，把 CSS 内容读成字符串后插入 <style></style>，天然避开协议限制，也兼容 asar。
关键点：
- preload 脚本中必须用
fs.readFileSync()+path.join(__dirname, '../styles/main.css')定位文件（__dirname是 preload 文件所在目录） - 若项目已打包，需配合
process.resourcesPath或app.getAppPath()找真实路径，不能硬编码__dirname - 注入逻辑要放在 DOM ready 后，或用
document.addEventListener('DOMContentLoaded', ...) - 大体积 CSS 字符串拼接易出错，且无法利用浏览器缓存和 source map 调试
注册 app:// 协议是生产环境最干净的长期解法
它让 CSS 走 Chromium 允许的自定义协议通道，保留 <link> 语义，又规避所有 file:// 限制，还天然支持 asar。
注册要点：
- 必须在
app.whenReady()之后、BrowserWindow创建之前调用protocol.registerFileProtocol('app', ...) - 回调里用
path.normalize(`${__dirname}/${request.url.slice(6)}`)拼路径，防止..跳出根目录 - HTML 中写
<link rel="stylesheet" href="app://css/main.css">，路径基于项目根目录 - 注册后需重启应用才生效；开发时加
console.log确认回调是否触发
复杂点在于路径映射逻辑要兼顾开发态（源码目录）和生产态（asar 包内），容易忽略 process.resourcesPath 和 app.isPackaged 的判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
