Gatsby v2网站无法正确加载CSS [英] Gatsby v2 site does not load CSS properly

问题描述

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

In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.

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

There are no errors but I do get this warning:

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

The resource http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

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

When I inspect that file it shows:

{"pageContext":{}}

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

The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.

我也尝试过

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

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

but no luck so far.

推荐答案

这可能与以下事实有关:主要组件(例如Layout)会在每个页面上卸载和重新安装.

This could be related to the fact that main component e.g Layout unmounts and remounts on every page.

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

Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.

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

For example you could try do following:

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

For more info visit: https://www.gatsbyjs.org/docs/browser-apis/

这篇关于Gatsby v2网站无法正确加载CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！