Electron 中 href="./styles.css" 开发时偶有效是因文件系统浏览器宽松解析，打包后必 404；根本原因是 file:// 协议下相对路径基准为 HTML 所在目录，且 asar 不支持跨目录访问，webSecurity: true 拦截请求。
直接用 在 Electron 里大概率失效，不是路径写错了，而是 Chromium 在 file:// 协议下对相对路径的解析锚点错位 + webSecurity: true 主动拦截跨目录请求——开发时“能用”只是巧合，打包进 .asar 后必然全挂。
为什么 href="./styles.css" 开发时有时有效、打包后全 404？
Electron 渲染进程用 file:// 加载 HTML，其相对路径基准是 HTML 文件所在目录，不是项目根目录，也不是 process.cwd()。常见陷阱包括：
-
win.loadURL('file://' + path.join(__dirname, 'dist/index.html'))会丢失当前目录上下文，./styles.css完全失效 - 双击打开
index.html能加载，是因为文件系统浏览器给了宽松路径解析；loadFile()才能还原正确基准 - 打包后所有资源进
resources/app.asar，file://无法穿透 asar 包读取子目录，../styles.css类路径直接被 Chromium 拦截为net::ERR_FILE_NOT_FOUND - CSS 里用
@import './theme.css'也会静默失败，因为@import路径解析同样依赖 HTML 所在目录，且 asar 内部路径不支持该语法
最稳方案：用 app:// 协议注册自定义资源路径
这是唯一兼顾开发、打包、多窗口、多级目录的长期解法。它绕过 file:// 的协议限制，适配 asar，且路径映射逻辑收口统一。
- 必须在
app.whenReady()之后、BrowserWindow创建之前调用protocol.registerFileProtocol('app', ...) - 回调中必须用
path.normalize()处理request.url.slice(6)拼出的路径，否则可能被..遍历攻击 - HTML 中写
，不是file://或./ - 映射路径建议用
path.join(app.getAppPath(), 'assets', 'css')，确保 asar 内部和解压模式都可访问
动态注入 CSS 字符串（适合主题切换或运行时控制）
当需要切换暗色/亮色主题、或样式需根据 IPC 消息动态生成时， 标签无法可靠刷新，应改用 JS 注入 标签。
- 在
preload.js中用fs.readFileSync(path.join(__dirname, '../assets/css/dark.css'), 'utf8').trim()读取内容（注意：打包后要用process.resourcesPath替代__dirname） - 注入前必须等
document.addEventListener('DOMContentLoaded', ...)，不能在 preload 脚本顶部执行 - 每次切换前先移除旧的
，再插入新内容，避免样式残留 - 大体积 CSS 必须用
.trim()清掉 BOM，否则 Chromium 解析失败且无提示
别踩这些坑
真正麻烦的不是加一行 ，而是当项目从单窗口变成多窗口、从开发走向打包、从静态样式变成动态主题时，路径逻辑彻底崩塌。
- 不要在 HTML 里硬写
file:///C:/xxx.css—— 路径不可移植，Windows/macOS/Linux 全不同，且 asar 下根本不存在该路径 - 不要依赖构建工具自动拷贝 CSS 到输出目录再配相对路径 —— Vite/Webpack 会哈希重命名文件，
dark.css可能变成dark.abc123.css，无法匹配 - 不要用
@import引入本地 CSS —— 在 asar 中路径解析失败，静默丢弃，控制台零报错 - 字体、图片等资源路径规则和 CSS 文件本身一致：仍以 HTML 所在目录为基准，不是 CSS 文件位置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
