Gatsby v2 网站无法正确加载 CSS

Question

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

没有错误，但我确实收到此警告：

资源 http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json 已使用链接预加载进行预加载，但在少数情况下未使用距窗口加载事件的秒数。请确保它具有适当的 as值并且是有意预加载的。

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

{"pageContext":{}}

我认为该对象是空的这一事实是我的问题。我尝试禁用服务人员，但这只会使问题变得更糟。

我也尝试过

• 强制构建并禁用 netlify 上的缓存，
• 删除 npm 和 package.json 文件，然后运行 ​​npm build，

但到目前为止还没有运气。

Answer 1

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

尝试在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'

欲了解更多信息，请访问： https: //www.gatsbyjs.org/docs/browser-apis/

Answer 2

我有同样的问题。就我而言，gatsby-plugin-styled-components我的gatsby-config.js.

https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/

https://github.com/gatsbyjs/gatsby/issues/8984