gatsby中在gatsby-browser.js里导入css不起作用，是因为该文件仅用于客户端运行时js行为，不参与服务端渲染的css提取流程；正确做法是同时在gatsby-browser.js和gatsby-ssr.js中导入全局css，确保ssr与csr样式一致。
为什么在 gatsby-browser.js 里导入 CSS 不起作用
直接在 gatsby-browser.js 中写 import "./src/styles/global.css" 看似合理，但 Gatsby 的构建流程会跳过该文件中的 CSS 导入（尤其在 SSR 阶段），导致样式只在浏览器端生效、服务端渲染时缺失，页面首屏可能闪动或无样式。这不是 bug，而是 Webpack + Gatsby 的模块处理逻辑决定的：该文件仅用于运行时 JS 行为（如路由监听、全局事件），不参与 CSS 提取和注入流程。
正确引入全局 CSS 的标准位置是 gatsby-browser.js 吗
不是。Gatsby 官方推荐且唯一可靠的方式是把全局 CSS 导入放在 gatsby-browser.js 的「兄弟文件」——gatsby-ssr.js 中，且必须同时存在，否则 SSR 和 CSR 样式不一致。两个文件需保持导入语句完全一致：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
import "./src/styles/global.css"
这样 Webpack 才会在构建时识别该 CSS 并注入到 HTML 中，确保服务端渲染和客户端水合后样式一致。
如果非要只用一个入口文件，能不能只写在 gatsby-browser.js
可以，但必须配合插件强制启用 CSS 注入。比如使用 gatsby-plugin-postcss 或 gatsby-plugin-sass 时，它们会自动接管 CSS 处理；但纯 CSS 文件仍建议走双文件方案。若坚持单点导入，需确认：
- 项目已安装并启用了对应 CSS 插件（如 gatsby-plugin-css-imports 并配置了 cssLoaderOptions）
- global.css 文件路径正确，且未被 .gitignore 或 Webpack exclude 规则屏蔽
- 没有重复导入（例如又在 layout.js 中 import 同一文件），否则可能触发 HMR 冲突或样式覆盖
实际项目中最稳妥的做法
按 Gatsby 最小侵入原则操作：
- 在 src/styles/global.css 中写所有重置、变量、基础选择器
- 在 gatsby-browser.js 和 gatsby-ssr.js 中都写同一行：import "./src/styles/global.css"
- 删除任何在组件中重复 import 全局 CSS 的代码（比如 Layout 组件里不再 import）
- 运行 gatsby build && gatsby serve 验证生成的 HTML 中 是否包含内联或链接的 CSS 资源
漏掉 gatsby-ssr.js 是最常被忽略的环节，尤其当开发时看不出问题，上线后首屏样式丢失才暴露——这时候回看构建产物里的 HTML 就能立刻定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
