Сайт 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,

, но пока не повезло.

Answer 1

Это может быть связано с тем, что основной компонент, например, Layout, размонтируется и перемонтируется на каждой странице.

Попробуйте сослаться на свои CSS-файлы в файле gatsby-browser.js, который предоставляется по умолчанию и находится в корневом каталоге.вашего проекта.

Например, вы можете попробовать сделать следующее:

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