Gatsby构建后CSS未内联，因未在gatsby-ssr.js中实现onRenderBody函数接管HTML渲染并注入style标签；Hugo需用resources.Get + safeCSS在模板中输出编译后CSS内容。
为什么Gatsby构建后CSS没内联？关键在gatsby-ssr.js里漏了onRenderBody
静态站点生成器默认不内联CSS，Gatsby得手动接管HTML渲染流程才能注入。不写onRenderBody，哪怕你用dangerouslySetInnerHTML塞样式，也只在客户端生效，首屏仍会闪白或FOUC。
实操建议：
- 在项目根目录创建
gatsby-ssr.js（不是gatsby-browser.js） - 必须导出
onRenderBody函数，并用setHeadComponents插入<style>标签 - 读取CSS内容时，不能直接
import './styles.css'——Webpack会把它当模块打包进JS，得用fs.readFileSync同步读取构建产物中的public/styles.css - 注意路径：Gatsby构建后CSS通常在
public/static/css/下，文件名带hash，得用glob或正则匹配最新文件
示例片段：
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
const cssPath = path.join(__dirname, 'public', 'static', 'css', '*.css')
const cssFile = glob.sync(cssPath)[0]
const cssContent = fs.readFileSync(cssFile, 'utf8')
setHeadComponents([
<style key="inline-css" dangerouslySetInnerHTML={{ __html: cssContent }} />
])
}
Hugo怎么让<style>进<head>而不靠JS？用resources.ExecuteAsTemplate和safeCSS
Hugo本身不处理CSS内联，但能读取SCSS/Sass/PostCSS输出后的最终CSS文件，再原样注入。关键不是“编译时”，而是“模板渲染时”把CSS内容当字符串塞进去。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 用
{{ .Site.Params.css | safeHTML }}——这是把路径当HTML，不是内容 - 在
layouts/partials/head.html里直接{{ readFile "assets/css/main.css" | safeCSS }}——readFile只能读assets/下源文件，但构建后CSS在resources/_gen/assets/，路径不对 - 忽略
safeCSS：不加这个，Hugo会转义<>，样式直接失效
正确做法：
- 先在
layouts/partials/head.html中定义资源管道：{{ $css := resources.Get "css/main.css" | resources.ToCSS | resources.Minify }} - 再用
{{ $css.Content | safeCSS }}输出内容（不是.Permalink） - 确保
main.css是通过Hugo Pipes编译的（即放在assets/css/下），否则resources.Get找不到
Gatsby和Hugo内联CSS后，Critical CSS还用不用单独提取？
内联≠临界CSS。两者目标不同：内联是把所有CSS塞进HTML头部，临界CSS是只塞首屏需要的那部分。全量内联反而可能增大HTML体积，拖慢TTFB。
性能影响明显：
- Gatsby全量内联100KB CSS → HTML从5KB涨到105KB，首字节时间延长200ms+
- Hugo若对
resources.ToCSS不做media条件过滤，打印页样式也会进首页HTML - 移动端加载大块
<style>比加载一个link[rel=preload]更难被浏览器并发处理
建议：
- 只对
base.css、typography.css等全局基础样式内联 - 页面级CSS（如
blog-post.css）仍走<link rel="stylesheet">，用preload提示优先加载 - Gatsby可用
gatsby-plugin-critical配合onPostBuild提取，别硬塞进onRenderBody
内联后样式失效或顺序错乱？检查<style>插入位置和key唯一性
React（Gatsby）和Hugo都依赖插入顺序决定CSS优先级。插错位置或重复key会导致样式被覆盖或解析失败。
容易踩的坑：
- Gatsby中多个插件都调
setHeadComponents，但没设key——React把同类型标签当可复用节点，后插的<style>可能被前一个覆盖 - Hugo中
{{ $css.Content | safeCSS }}放在<meta>之后、<title>之前，导致浏览器解析中断，部分样式不生效 - 内联CSS里含
@import或@font-face——这些规则在<style>里有效，但若字体URL是相对路径，可能404（因HTML路径和CSS路径不一致）
验证方法：
- Gatsby构建后打开
public/index.html，搜<style，确认只有一个且在<head>最底部 - Hugo运行
hugo --minify后检查public/index.html，看<style>是否完整、无转义字符
真正麻烦的是动态主题切换场景——内联CSS没法按需替换，这时候就得退回去用<link> + media="print" onload="this.media='all'"这种降级方案。
