Electron中file://协议加载CSS被拦截是因webSecurity默认启用，可靠方案为：1. 用preload脚本动态注入CSS；2. 通过protocol.registerFileProtocol注册app://等自定义协议映射资源路径。
Electron中用file://协议加载CSS文件被拦截
Electron默认启用安全策略，直接在HTML里写<link rel="stylesheet" href="file:///path/to/style.css">会被CSP或webSecurity阻止，页面空白或控制台报Not allowed to load local resource。
- 根本原因是Electron 5+默认开启
webSecurity: true，禁止从file://协议跨目录加载资源（包括CSS、JS、字体） - 不是路径写错，也不是文件不存在，而是安全机制主动拦截
- 开发时可能偶然“能用”，那是因某些版本未严格校验或路径恰好在同级目录下，但不可靠
正确引入本地CSS的两种可靠方式
绕过拦截不靠关安全开关，而靠让资源走允许的通道。推荐以下两种：
- 用
preload脚本注入CSS：在BrowserWindow配置中指定preload路径，再在preload.js里用document.head.appendChild()动态插入<style>或<link>（注意：此时href仍不能用file://，得转成data:或asar:） - 用
protocol.registerFileProtocol注册自定义协议（如app://），把CSS映射过去，再在HTML里写href="app://style.css"——这是最干净、可复用的方式
示例（注册app://）：
const { app, protocol } = require('electron')
const path = require('path')
app.whenReady().then(() => {
protocol.registerFileProtocol('app', (request, callback) => {
const filePath = path.normalize(`${__dirname}/${request.url.slice(6)}`)
callback({ path: filePath })
})
})
然后HTML中：<link rel="stylesheet" href="app://css/main.css">
立即学习“前端免费学习笔记（深入）”；
为什么不用disable-web-security？
加--disable-web-security命令行参数或设webPreferences.webSecurity = false确实能让file:// CSS加载成功，但会同时放开XSS、CSRF等全部防护，生产环境等于裸奔。
- Electron官方文档明确警告：该选项仅用于调试，不得用于发布版本
- 哪怕只是临时开发，也容易误提交配置，或让团队成员习惯性依赖它
- 现代Electron（v12+）对
file://资源加载的限制越来越细，关掉webSecurity也不一定彻底解决（比如fetch()仍可能失败）
ASAR包内CSS路径要注意什么
打包成.asar后，file://路径失效，必须用asar:协议或require('path').join(__dirname, ...)拼接真实路径。
-
__dirname在ASAR中指向app.asar根目录，不是解压后的路径 - 若CSS放在
resources/css/app.css，应写path.join(__dirname, 'resources', 'css', 'app.css')，再用fs.readFileSync读取后转data:text/css;base64,...注入，或通过protocol注册映射 - 别硬编码
file:///Users/xxx/.../app.asar/css/app.css——这在其他机器上绝对404
复杂点在于，CSS里引用的字体、图片等资源也要走同一套协议映射，否则只加载了CSS，里面url(font.woff)又404。这事一旦漏掉，调试起来特别费时间。
