Electron 中 ./styles.css 报 404 是因 file:// 协议下相对路径以 HTML 所在目录为锚点，非项目根或 process.cwd；须用 loadFile、保持 HTML 与 CSS 同级，并注意多窗口、打包及字体路径一致性。
link 标签引入 CSS 是最直接的方式，但路径一错就 404，不是文件丢了，是 Chromium 解析错了上下文。
为什么 ./styles.css 在 Electron 里常报 404
Electron 渲染进程用的是 file:// 协议，而它的相对路径解析锚点是 HTML 文件所在目录，不是项目根目录，也不是 process.cwd()。常见现象包括：
-
Network面板显示styles.css返回net::ERR_FILE_NOT_FOUND，但fs.existsSync('./styles.css')在主进程里却返回true - 双击
index.html能正常加载样式，用win.loadFile('index.html')启动就白屏 - 打包进
.asar后所有 CSS 全部失效，控制台无任何错误提示
根本原因：路径写法和物理文件结构不匹配，或误用了 loadURL。
必须用 loadFile，且路径结构要对齐
loadFile 才能给 Chromium 提供正确的当前目录上下文；loadURL('file://' + ...) 会丢失这个上下文，导致所有 ./ 解析失败。
- HTML 在
dist/index.html→ CSS 必须放在dist/styles.css -
<link rel="stylesheet" href="./styles.css">才有效；写成../styles.css或/styles.css都会错 - Vite 用户需检查
vite.config.ts中的build.rollupOptions.output.manualChunks，避免把 CSS 拆到子目录（如assets/xxx.css）再被相对路径漏掉 - Webpack 用户确保
copy-webpack-plugin把 CSS 文件复制到了与 HTML 同级的输出目录
多窗口场景下 CSS 容易重复或失效
每个 BrowserWindow 独立加载自己的 HTML，若各窗口 HTML 分散在不同子目录（如 dist/index.html、dist/windows/settings.html），同样写 ./styles.css 就会指向不同位置。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一通过
preload.js注入 CSS 字符串或<style>标签，绕过 HTML 中的link - 在
preload.js里用fs.readFileSync读取 CSS 内容，再动态创建<style>插入document.head - 若需主题切换，可将 CSS 内容作为字符串传入，配合
IPC从主进程下发新样式 - 注意：注入前需确认
contextIsolation: true下fs只能在 preload 中安全使用，不能在渲染进程直接 require
自定义字体等资源也要同步处理路径
CSS 里用 @font-face 引用本地字体时，路径解析规则和 CSS 文件本身一致——仍以 HTML 所在目录为基准，且必须显式声明 format()。
-
src: url('../fonts/Inter.woff2') format('woff2')中的../fonts/是相对于 HTML 文件位置，不是 CSS 文件位置 -
format('woff2')的引号不能省，写成format(woff2)会被 Chromium 忽略 - 如果字体文件在
resources/fonts/，而 HTML 在dist/index.html，那路径应为../../resources/fonts/Inter.woff2，而非假设“CSS 和字体同级” - 打包后验证方式：启动应用，右键 → “检查”，在 Elements 面板中展开
<head>，看<link>的href属性是否解析为真实存在的file://地址
link”，而是没意识到 Electron 的 file:// 不是你浏览器里双击打开的那个 file://——它有自己严格的路径锚点规则，而且这个规则在多窗口、打包、预加载等环节会层层叠加影响。 
