Gatsby v2网站无法正确加载CSS

Question

3

在我的开发环境中，网站看起来符合预期，但是当我运行 gatsby build 后，我的 CSS 无法正常显示。如果我手动导航到另一个页面，那么 CSS 将如预期一样显示。

没有错误，但我收到了以下警告：

该资源 http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json使用链接预加载进行了预加载，但在窗口的加载事件之后的几秒钟内未被使用。请确保它具有适当的 as 值，并且是有意预加载的。

当我检查该文件时，它显示：

{"pageContext":{}}

我猜问题出在这个对象是空的。我已经尝试禁用服务工作者，但问题只变得更糟了。

我还尝试过：

但到目前为止都没有成功。

- OsoGrizz

2个回答

5

我有同样的问题。在我的情况下，gatsby-config.js 中缺少了 gatsby-plugin-styled-components。

- Dante Calderón

1

我在其他论坛上也听说过这个建议，但我并没有遇到这个问题。我逐步重建了我的网站，并发现这与媒体查询以及情感或样式化组件有关。我无法确定具体原因，这就是为什么我没有提供答案的原因。 - OsoGrizz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lukasz Pietraszek · Accepted Answer

这可能与主要组件（例如布局）在每个页面上卸载并重新挂载有关。

尝试在默认情况下位于您项目根目录中的gatsby-browser.js文件中引用您的CSS文件。

例如，您可以尝试执行以下操作：

// gatsby-browser.js
require('./my-global-styles.css')

它也可以与 gatsby-plugin-sass 一起使用。

// gatsby-browser.js
import './src/styles/my-global-styles.scss'