Gatsby Starter Kit中添加全局样式（不使用Layout组件）无效果，求助排查缺失步骤

看起来你已经走了正确的第一步，但样式没生效大概率是某个细节没做对，我帮你梳理几个最可能的遗漏点：

1. 确认gatsby-browser.js的位置是否正确 #

这个文件必须放在项目根目录下（和package.json、gatsby-config.js同级），而不是src文件夹里面。如果误放到src里，Gatsby根本不会读取它的配置，自然不会加载你的全局样式。

2. 检查文件路径是否完全匹配 #

你导入的路径是./src/styles/global.css，要确认：

• src/styles文件夹确实存在
• global.css的文件名完全一致（注意大小写！Linux/macOS系统对文件名大小写敏感，比如Global.css和global.css会被识别成不同文件）
• 路径里的斜杠有没有写错（Windows用反斜杠，但在Gatsby里写正斜杠也没问题）

3. 清除Gatsby缓存并重启开发服务器 #

Gatsby的缓存有时候会“卡住”旧的样式，导致新修改不生效。执行以下命令：

gatsby clean
gatsby develop

重启后再看看样式有没有生效。

4. 检查是否有其他样式覆盖了全局规则 #

官方Starter Kit可能自带了一些默认样式（比如Layout组件、重置样式），它们的优先级可能比你的全局样式高。你可以：

• 打开浏览器开发者工具（F12），选中<body>标签，查看它的样式面板，看看min-height: 100vh是不是被划掉了（说明被其他样式覆盖）
• 临时给全局样式加!important测试（只是排查用，不要长期使用）：

  * { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
  body { min-height: 100vh !important; }
  

如果加了!important生效了，说明是样式优先级问题，你需要调整选择器的权重（比如用html body代替body），或者检查其他样式文件的导入顺序。

5. 确认gatsby-browser.js里没有语法错误 #

如果导入语句写错了（比如少了分号、路径引号没闭合），可能会导致整个文件失效。检查一下文件内容，确保只有正确的导入：

import "./src/styles/global.css"

6. 检查是否安装了必要的CSS处理插件 #

虽然普通CSS文件不需要额外插件，但如果你的Starter Kit用了gatsby-plugin-postcss或类似插件，确保它在gatsby-config.js的plugins数组里配置正确。不过一般来说，纯CSS文件不需要额外配置就能被Gatsby识别。

如果以上步骤都试过还是不行，建议打开浏览器开发者工具的“网络”面板，看看global.css有没有被成功加载——如果没加载到，那还是路径或文件位置的问题；如果加载到了但没生效，就是样式优先级或冲突的问题。

内容的提问来源于stack exchange，提问作者Robdll