无效，因gatsby-browser.js不参与SSR样式提取；必须同时在gatsby-browser.js和gatsby-ssr.js中导入全局CSS，确保服务端渲染HTML的<head>含样式，避免首屏闪动或无样式。
直接在 gatsby-browser.js 里 import "./src/styles/global.css" 是无效的——它只在浏览器端生效，服务端渲染（SSR）时样式丢失，首屏会闪动或无样式。Gatsby 的构建流程压根不从这个文件提取 CSS。
为什么必须同时写 gatsby-browser.js 和 gatsby-ssr.js
Gatsby 在构建阶段靠 gatsby-ssr.js 注入 CSS 到 HTML 的 <head> 中，确保 SSR 输出带样式；gatsby-browser.js 负责客户端水合后的 JS 行为（比如路由监听），不参与样式注入。两个文件必须都写同一行导入，否则 CSR 和 SSR 样式不一致。
- 漏掉
gatsby-ssr.js是上线后首屏样式丢失的最常见原因 - 哪怕开发时看着正常，
gatsby build && gatsby serve一跑就暴露问题 - 检查构建产物（
public/index.html）的<head>里有没有内联 CSS 或<link>，是最快验证方式
用 gatsby-plugin-sass 或 gatsby-plugin-postcss 时怎么配全局样式
这类插件接管了 CSS 处理链，但它们本身不自动注入全局样式——你仍需手动在 gatsby-browser.js 和 gatsby-ssr.js 中导入，只是路径可以是 .scss 或 .css 文件。
- 安装后必须在
gatsby-config.js中启用插件：`gatsby-plugin-sass` - 导入语句保持一致：
import "./src/styles/global.scss"（注意扩展名） - 如果用了
@import嵌套 Sass 文件，确保所有被引用的文件都在 Webpack 的 resolve 范围内，别被exclude规则屏蔽 - 不要在组件里重复
import同一个全局文件，否则 HMR 下容易样式覆盖或冲突
引入第三方 CSS（如 Bootstrap、Tailwind）的注意事项
第三方 CSS 本质也是普通 CSS 文件，同样受 Gatsby 的 SSR/CSR 分离机制约束。不能只靠组件内 import "bootstrap/dist/css/bootstrap.min.css" 就完事。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一收口到
gatsby-browser.js+gatsby-ssr.js导入，避免分散管理 - Tailwind 用户：必须配合
gatsby-plugin-postcss，且global.css中要写@tailwind base等指令，不能只靠插件启用就自动生效 - CDN 引入（如
<link rel="stylesheet">）绕过构建流程，但失去 PurgeCSS、PostCSS 等优化能力，也不支持主题变量注入 - 若用
styled-components或emotion，它们自带 SSR 支持，但全局重置类（如* { margin: 0 }）仍建议走 CSS 文件 + 双入口导入，更可控
真正容易被忽略的不是“怎么写”，而是“在哪写”——gatsby-ssr.js 这个文件连很多老项目里都不存在，得手动创建。只要它缺位，所有 CSS 导入在 SSR 阶段就等于没发生。
