Gatsby/Hugo内联CSS设置教程

本文详解Gatsby与Hugo两大静态站点生成器实现CSS内联的关键配置与常见陷阱：Gatsby需在gatsby-ssr.js中正确实现onRenderBody函数，通过fs.readFileSync读取构建后的带hash CSS文件并用setHeadComponents注入head，而非依赖import或客户端渲染；Hugo则须借助resources.Get + ToCSS/Minify管道获取编译后CSS内容，并以safeCSS安全输出，严禁误用readFile或safeHTML；文章更进一步指出全量内联不等于临界CSS优化，盲目内联反而增大HTML体积、拖慢TTFB，建议仅内联基础样式，页面级CSS仍走link preload，并警惕插入顺序、key唯一性及@import路径失效等隐藏问题——掌握这些，才能真正消除FOUC、提升首屏性能。

为什么Gatsby构建后CSS没内联？关键在gatsby-ssr.js里漏了onRenderBody

静态站点生成器默认不内联CSS，Gatsby得手动接管HTML渲染流程才能注入。不写onRenderBody，哪怕你用dangerouslySetInnerHTML塞样式，也只在客户端生效，首屏仍会闪白或FOUC。

实操建议：

• 在项目根目录创建gatsby-ssr.js（不是gatsby-browser.js）
• 必须导出onRenderBody函数，并用setHeadComponents插入