在Gatsby静态站点中如何正确引入并内联关键CSS-css教程-PHP中文网

真正内联css必须在gatsby-ssr.js的onrenderbody中同步读取构建产物css文件并注入标签；import方式依赖style-loader导致fouc，gatsby-browser.js引入不参与ssr。

在gatsby静态站点中如何正确引入并内联关键css

直接在组件里 import "./styles.css" 或只在 gatsby-browser.js 中引入全局样式，都不是真正的内联——前者把 CSS 打包进 JS bundle，后者根本不参与 SSR，首屏必然 FOUC。

为什么 `import` 语句无法实现 CSS 内联

Webpack 把 import 当作 JS 模块处理，最终依赖 style-loader 在运行时动态插入 <style></style> 标签。这意味着：

首屏渲染必须等 JS 下载、解析、执行后才注入样式
CSS 无法被浏览器并行下载，阻塞关键渲染路径
JS 加载失败或执行中断，页面就彻底无样式
构建产物中 CSS 通常混在 app-xxx.js 里，不是独立文件

正确做法：在 `gatsby-ssr.js` 中读取构建产物并注入 `<style></style>`

目标是绕过 JS 模块系统，在 HTML 构建阶段就把 CSS 内容写入。关键步骤如下：

CSS婚礼策划服务机构宣传网站模板

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

下载

确保 CSS 已通过 gatsby-plugin-postcss 或 gatsby-plugin-sass 输出到 public/static/css/，文件名带 hash（如 app.123abc.css）
在 gatsby-ssr.js 中用 fs.readFileSync 同步读取该文件（仅限构建时，不可用于浏览器）
在 onRenderBody 钩子中用 setHeadComponents 注入 <style></style> 标签，dangerouslySetInnerHTML 填入原始内容
绝对不要在 gatsby-browser.js 做任何对应操作——那是客户端行为，与内联目标冲突

示例代码片段：

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></style>
  ])
}