electron中报“not allowed to load local resource”是因chromium安全策略主动拦截file://协议下的css资源请求，与路径无关；根本原因是该请求被视作跨源本地资源加载而被拒绝，且关闭websecurity也无法完全解决。
因为 Chromium 主动拦截 file:// 协议下跨文件的 CSS 加载请求，不是路径写错，也不是服务器配置问题，而是安全策略默认生效。
为什么 <link rel="stylesheet" href="file:///xxx.css"> 会报 Not allowed to load local resource
Electron 和基于 Chromium 的 WebView（如 Android 的 WebView、iOS 的 WKWebView）在 file:// 上下文中加载 HTML 后，会对同目录或子目录下的 CSS/JS 文件发起独立资源请求 —— 这类请求被 Chromium 视为“本地资源加载”，触发严格的跨源限制（即使路径完全合法）。控制台错误不是 404，而是直接拒绝发起网络请求。
- 该行为与是否启用
webPreferences.webSecurity = false无关：关掉它可能让 JS 加载通过，但 CSS 仍被拦截（部分版本甚至更严格） -
file://下的/css/style.css会被解析为磁盘根路径（如file:///css/style.css），而非项目根目录，双重错误叠加 - 打包进
.asar后，file://路径无法访问包内资源，错误从“被拦截”变成“根本不存在”
用 preload.js 注入 CSS 字符串是最稳的解法
绕过所有协议和路径解析环节，把 CSS 内容读成字符串后动态插入 <style></style> 标签，不触发任何资源加载请求。
- 在
preload.js中用fs.readFileSync（Electron）或fetch('app://...')（需注册协议）读取 CSS 内容 - 拼接
document.head.appendChild(Object.assign(document.createElement('style'), {textContent: cssStr})) - 注意编码：读取时显式指定
'utf8'，避免 BOM 或乱码导致解析失败 - 若 CSS 含
@import或相对 URL（如背景图），需手动重写路径或改用 base64 内联
开发阶段别用双击打开 HTML，必须起本地 HTTP 服务
哪怕只是验证路径，file:// 下的行为和真实环境（http://localhost 或打包后协议）完全不同，会掩盖路径基准点、MIME 类型、CORS 等关键问题。
- 推荐命令：
npx serve -s（自动设Content-Type: text/css）、python3 -m http.server 8000（Python 3.7+ 自带正确 MIME） - VS Code 的 Live Server 插件默认以
/为根，但需确认其 serve 的是项目根，而非工作区根 - 切忌在
file://下测试 CDN 链接：浏览器会静默拒绝加载非本地https://资源，且不报明显错误
真正容易被忽略的是：CSS 文件本身能被浏览器地址栏直接打开 ≠ 它能被 <link> 正常加载。前者走的是文档渲染流程，后者触发的是资源加载管道 —— 两者受控于不同层级的安全策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
