最简可靠方式是用<link rel="stylesheet" href="./styles/main.css">，但须满足三条件：HTML与CSS物理路径关系匹配、主进程调用win.loadFile()加载、打包时未硬编码绝对路径；否则相对路径静默失效或触发Chromium跨目录拦截。
最简可靠的方式是用 <link rel="stylesheet" href="./styles/main.css">，但必须同时满足三个条件：HTML 和 CSS 物理路径关系匹配、主进程调用 win.loadFile() 加载、打包时没硬编码绝对路径。否则相对路径会静默失效或触发 Chromium 跨目录拦截。
为什么 loadFile() 比 loadURL('file://...') 关键
Chromium 解析 ./styles/main.css 依赖当前 HTML 所在“目录上下文”。win.loadFile('src/index.html') 会把 src/ 设为基准目录；而 loadURL('file://' + path.join(__dirname, 'src', 'index.html')) 会让 Chromium 丢失该上下文，所有相对路径都从根目录开始算，结果就是 404 或空白样式。
- 开发时检查控制台 Network 面板：如果
main.css显示file:///styles/main.css（缺了src/），说明你误用了loadURL - 打包进
.asar后仍有效——Electron 运行时自动解包并映射相对路径，前提是路径没写成/Users/xxx/app/src/styles/main.css这类绝对路径 - Windows 下路径分隔符不用手动转义：
./styles/main.css在所有平台都生效
@import 在 .asar 中为何静默失败
浏览器原生解析 @import 时，不经过 Electron 的 .asar 解包逻辑，而是直接按字面路径去文件系统找。所以 @import './theme.css'; 在打包后会尝试读取 file:///app.asar/src/styles/theme.css，但实际路径是 app.asar.unpacked/src/styles/theme.css 或已解压到临时目录，导致失败且无报错。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免在 CSS 文件里嵌套
@import，尤其涉及跨目录引用时 - 构建阶段就合并 CSS（如用 PostCSS 或 Webpack 的
css-loader） - 若必须运行时加载，改用 JS 动态创建
<link>标签，并用path.join(app.getAppPath(), 'styles', 'theme.css')构造路径
preload.js 注入 CSS 字符串的实操要点
适合主题切换、暗色模式热更新等运行时控制场景，但不能替代主样式表——体积大了会阻塞渲染，且无法被 DevTools 的 Styles 面板完整追踪。
立即学习“前端免费学习笔记（深入）”；
- 注入前必须等
document.addEventListener('DOMContentLoaded', () => { ... })，否则document.head可能不存在 - 读取文件要用
fs.readFileSync(path.join(process.resourcesPath, 'styles', 'main.css'), 'utf8').trim()，process.resourcesPath才能正确指向.asar或解包目录 - 不要用
__dirname拼路径：它指向preload.js所在目录，不是项目资源目录；开发时可能碰巧对，打包后必错 - 大文件建议加
try/catch，失败时 fallback 到空<style>，避免白屏
真正容易被忽略的是：CSS 文件本身是否带 BOM。Windows 编辑器保存的 UTF-8 文件常含 BOM 字节，会导致 fs.readFileSync() 读出的字符串开头是 \ufeff，浏览器解析 CSS 时直接报语法错误，且控制台只提示“invalid property name”，很难定位。
