gatsby-browser.js 不会加载 css 文件 - hello-world 教程答案

【问题标题】：gatsby-browser.js won't load css file - hello-world tutorialgatsby-browser.js 不会加载 css 文件 - hello-world 教程
【发布时间】：2021-02-28 07:13:17
【问题描述】：

我正在阅读有关样式基础知识的 gatsby 文档教程，但 css 文件没有被导入或呈现到页面上。

说明如下：
2. 在 gatsby-browser.js 文件中导入您最近创建的样式表：

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

https://www.gatsbyjs.com/docs/tutorial/part-two/

global.css 只是有一个 html 标签：

html {

    background-color: red;
}

背景颜色没有显示。 Web 服务器正在运行，我正在查看正确的页面。（我可以在 index.js 中添加更多文本并显示）。文件已保存，因为我已经尝试了几次。我也尝试使用教程中显示的“require”，但这也不起作用。

另外，开发工具中的控制台告诉我：

index.js:2177 404 page could not be found. Checkout https://www.gatsbyjs.org/docs/add-404-page/

我不知道它指的是哪个页面，因为到目前为止我只有 index.js。

谢谢

【问题讨论】：

您能在开发者工具中看到您的background-color css 规则吗？
@ksav 不，我只看到带有浏览器放置的正文标记的“用户代理样式表”。
gatsby develop 是否仍在您的终端中运行？如果您对索引页面组件进行简单更改，它是否会反映在浏览器中？
@ksav 是的，我刚刚再次检查，在它显示的“hello world”旁边添加了更多文本。

标签： gatsby

【解决方案1】：

好的，因为它只有几个步骤，所以我决定放弃这个项目，然后再做一次。

然后我意识到指令说要在终端中运行“touch [filename]”来为 global.css 和 gatsby-browser.js 创建文件。我认为我是在 VS Code 中创建它们的。使用 touch 命令重做这些步骤后，显示背景颜色。我不确定为什么这会在 gatsby 中产生影响，但显然确实如此。我仍在阅读以找出原因。

【讨论】：

很可能不是因为您使用了touch... 甚至不确定使用touch 与VS Code 创建的文件是否有任何不同。可能是其他问题

【解决方案2】：

这与您创建文件的方式无关。 您需要做的是在本地停止 gatsby 开发（服务器），然后重新启动它。我相信“gatsby-browser.js”文件必须在启动时加载。

【讨论】：