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-plugin-styled-components中缺少gatsby-config.js。

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

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

Answer 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/

Gatsby v2网站无法正确加载CSS

2 个答案: