如何在Electron桌面应用中正确加载本地CSS？-css教程-PHP中文网

electron 中 ./styles.css 报 404 是因 file:// 协议下相对路径以 html 所在目录为锚点，非项目根或 process.cwd；须用 loadfile、保持 html 与 css 同级，并注意多窗口、打包及字体路径一致性。

如何在electron桌面应用中正确加载本地css？

link 标签引入 CSS 是最直接的方式，但路径一错就 404，不是文件丢了，是 Chromium 解析错了上下文。

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 才能给 Chromium 提供正确的当前目录上下文；loadURL('file://' + ...) 会丢失这个上下文，导致所有 ./ 解析失败。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 同级的输出目录

每个 BrowserWindow 独立加载自己的 HTML，若各窗口 HTML 分散在不同子目录（如 dist/index.html、dist/windows/settings.html），同样写 ./styles.css 就会指向不同位置。

推荐统一通过 preload.js 注入 CSS 字符串或 <style></style> 标签，绕过 HTML 中的 link
在 preload.js 里用 fs.readFileSync 读取 CSS 内容，再动态创建 <style></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 面板中展开，看 <link> 的 href 属性是否解析为真实存在的 file:// 地址