最稳妥方案是用 win.loadfile() 配合相对路径 link href="./styles/main.css"，需确保 html/css 物理路径匹配、未硬编码绝对路径、且 chromium 的 websecurity 不拦截跨目录请求。
直接用 <link rel="stylesheet" href="./styles/main.css"> 是最稳妥的方案，前提是主进程调用 win.loadFile()、HTML 与 CSS 物理路径匹配、打包未硬编码绝对路径——三者缺一不可，否则会静默失败或报 “Not allowed to load local resource”。
为什么 href="./styles/main.css" 有时不生效？
不是路径写错了，是 Chromium 主动拦截：Electron 5+ 默认启用 webSecurity: true，对 file:// 协议下跨目录的资源请求做协议级拒绝。哪怕 fs.existsSync() 返回 true，浏览器根本不会发请求，控制台只显示安全错误，不是 404。
- 开发时“偶尔能用”，往往因为 HTML 和 CSS 恰好同级，被宽松放行；一旦移入子目录或打包进
.asar，大概率崩 -
win.loadURL('file://' + path.join())会让 Chromium 丢失当前目录上下文，相对路径彻底失效 - CSS 文件里用了
@import './theme.css'？它在.asar中常因路径解析失败而静默丢弃，不报错也不加载
用 win.loadFile() + 相对路径的实操要点
这是默认安全、无需额外配置、适配 .asar 打包的首选方式。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 中写
<link rel="stylesheet" href="./styles/main.css">，路径必须与物理结构严格一致（例如index.html在src/，CSS 就得在src/styles/main.css） - 主进程必须用
win.loadFile('src/index.html')，不能用loadURL('file://...') - 打包后仍有效——Electron 运行时自动解包并映射相对路径，但前提是构建脚本没把路径写死成绝对路径
- 避免在 CSS 里嵌套
@import，建议扁平化合并或改用 JS 动态加载
需要跨目录或结构复杂？注册 app:// 协议
当 HTML 在 dist/app/、CSS 在 src/styles/，或项目有多个入口页且路径关系不固定时，硬靠相对路径会越来越难维护。
- 注册必须在
app.whenReady()之后、BrowserWindow创建之前调用protocol.registerFileProtocol('app', ...) - 回调中必须用
path.normalize()处理request.url.slice(6)拼出的路径，否则可能被../..遍历攻击 - HTML 中写
<link rel="stylesheet" href="app://css/main.css">，不是file:// - 注册后需重启应用才生效；开发时可在回调里加
console.log确认是否触发
preload.js 注入 CSS 字符串的适用边界
这不是主样式表的常规加载方式，但适合暗色模式切换、主题热更新等运行时控制场景——它绕过所有协议限制，因为内容是字符串，不是外部请求。
- 必须在
BrowserWindow配置中启用preload，且推荐保持contextIsolation: true - 路径要用
path.join(__dirname, '../styles/main.css')——注意：__dirname是preload.js所在目录，不是 HTML 所在目录 - 打包后必须用
process.resourcesPath或app.getAppPath()替代__dirname，否则读不到.asar内部文件 - 注入时机必须等
document.addEventListener('DOMContentLoaded', ...)，不能在 preload 脚本顶部执行 - 大体积 CSS 建议用
fs.readFileSync(..., 'utf8').trim()清掉 BOM，避免解析失败
真正容易被忽略的是：所有路径解析都依赖于当前执行上下文——__dirname 在 preload.js 里指向 preload 文件位置，win.loadFile() 的路径是相对于主进程工作目录，而 app:// 回调里的路径拼接又必须经 path.normalize() 防御遍历。这三个上下文稍有错位，样式就消失得无声无息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
