Electron 5+ 默认拦截 file:// 协议跨目录加载 CSS，因 Chromium 安全策略限制；推荐用 win.loadFile() 配合相对路径，或注册 app:// 协议，避免禁用 webSecurity。
Electron 5+ 默认拦截 file:// 协议跨目录加载 CSS，不是路径写错了，而是 Chromium 主动拒绝——关掉 webSecurity: false 能临时“修好”，但等于拆掉防火墙，不推荐。
为什么 href="file:///absolute/path/to/style.css" 会报 “Not allowed to load local resource”
这个错误不是 404，是安全策略拦截。Electron 启动后默认用 file:// 协议加载 HTML，而 Chromium 对该协议下的 CSS/JS/字体等资源做了跨目录限制：哪怕 fs.existsSync() 返回 true，浏览器仍会静默拒绝请求。
- 开发时偶尔“能用”，往往是因为 CSS 和 HTML 恰好在同一级目录，被宽松放行，但上线或打包后极易崩
-
__dirname和path.join()在主进程有效，但在 HTML 的href属性里无法执行，写死绝对路径毫无意义 - 用
win.loadURL('file:///')加载 HTML 会让 Chromium 丢失当前目录上下文，相对路径也会失效
用 win.loadFile() + 相对路径是最简可靠方案
只要满足三个硬性条件，./styles/main.css 就能稳稳加载，无需注册协议、不用改安全配置。
- HTML 和 CSS 的物理位置关系，必须与
href中写的路径完全一致（例如都在src/下，HTML 写./styles/main.css） - 主进程必须调用
win.loadFile('src/index.html')，而不是win.loadURL('file://...') - 打包进
.asar后依然有效——Electron 会在运行时自动解包并映射相对路径 - 避免在 CSS 文件里用
@import嵌套引用，它在.asar环境中常因路径解析失败而静默丢弃
需要跨目录或动态路径？注册 app:// 协议
当项目结构复杂（比如 HTML 在 dist/app/、CSS 在 src/styles/），相对路径难以维护时，app:// 是官方推荐的替代方案。
- 注册必须在
app.whenReady()之后、BrowserWindow创建之前完成 - 回调里用
path.normalize(`${__dirname}/${request.url.slice(6)}`)拼路径，防止..遍历攻击 - HTML 中写
，不是file:// - 注册后需重启应用才生效；开发时可加
console.log确认回调是否触发
preload.js 注入 CSS 适合小量样式或运行时逻辑
这不是主样式表的常规加载方式，但适合暗色模式切换、主题热更新等场景。
- 在 preload 脚本中用
fs.readFileSync()读取 CSS 字符串，再创建插入document.head - 路径要用
path.join(__dirname, '../styles/main.css')，不能写相对 URL - 若已打包为
.asar，需配合process.resourcesPath定位真实路径 - 大量 CSS 字符串拼接易出错，且无法利用浏览器缓存和 source map 调试
最容易被忽略的是：所有方案都依赖主进程对文件路径的准确控制——loadFile 的路径参数错了，后面所有相对路径都会崩；app:// 注册时没做 path.normalize，就可能被路径遍历绕过。别只盯着 HTML 里怎么写 href，先盯住主进程那几行路径代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
