Gatsby v2 站点无法正确加载 CSS答案

【问题标题】：Gatsby v2 site does not load CSS properlyGatsby v2 站点无法正确加载 CSS
【发布时间】：2018-10-02 17:22:45
【问题描述】：

在我的开发环境中，网站看起来与预期一样，但是当我运行 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，

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

【问题讨论】：

标签： css build gatsby

【解决方案1】：

我也有同样的问题。就我而言，gatsby-plugin-styled-components 在我的gatsby-config.js 中丢失了。

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

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

【讨论】：

我已经在其他论坛上提出过这个建议，但我没有遇到这个问题。我逐步重建了我的网站，发现它与媒体查询以及情感或样式组件有关。我无法准确确定，这就是为什么我没有提供答案。

【解决方案2】：

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

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

【讨论】：