Gatsby JSS Мерцание при загрузке страницы

При загрузке страницы моего сайта Gatbsy наблюдается "мерцание" нестилизованного контента. Вероятно, наиболее полезно просмотреть предварительную версию текущего развертывания здесь https://happy-mahavira-5cd669.netlify.com/.

Мои исследования до этого момента привели меня к файлу gatsby-config.js как источнику проблемы. Вот как этот файл сейчас выглядит:

module.exports = {
  siteMetadata: {
    title: 'Dillon Morris - UI Designer & Developer',
    author: 'Dillon Morris',
    siteUrl: 'www.dillonmorris.me',
    description: 'Dillon is a UI/UX Developer & Designer in Phoenix, AZ',
  },
  plugins: [
    gatsby-plugin-react-helmet, {разрешение: gatsby-plugin-jss, параметры: {},}, {разрешение: gatsby-source-filesystem, параметры: {имя: src, путь: ${__dirname}/src/,},}, {разрешение: gatsby-transformer-remark, параметры: {плагины: [gatsby-remark-prismjs],},  }, {resolve: gatsby-plugin-manifest, options: {name: 'Dillon Morris UI / UX Designer & Developer', short_name: 'Dillon', start_url: '/', background_color: '# 663399', theme_color: '# 663399', дисплей  : 'minimal-ui', icon: 'src / images / logo.png', // Этот путь относительно корня сайта.  },}, gatsby-plugin-offline, 'gatsby-plugin-netlify',],}

Я также пробовал, чтобы gatsby-plugin-jss был явно указан в массиве плагинов (точно так же, как gatsyby-plugin-react-helmet), в отличие от объекта со свойствами разрешения и параметров, не повезло.

Это тот объем устранения неполадок, который я смог собрать самостоятельно, я не знаю других способов диагностики или устранения этой проблемы. Эта проблема не возникает локально в режиме разработки, только после сборки и развертывания в Netlify.

Не стесняйтесь читать код и копаться, если вам так хочется. https://github.com/dillonmorris91/portfoliodm.

Спасибо сообществу Stack Overflow ❤️


person dillonmorris    schedule 12.12.2018    source источник
comment
Вы исправили это? У меня похожая проблема.   -  person Borzi    schedule 08.09.2019
comment
Та же проблема. Никакие фреймворки просто не реагируют на компоненты, использующие sass для стилизации, развернутые для netlify. Любое решение?   -  person Taylor A. Leach    schedule 20.11.2019
comment
Привет! Вы нашли решение? У меня такая же проблема на моей странице: playmirage.netlify.app/character-sheet Пожалуйста, дайте мне знать, если вы в этом разобрались!   -  person lumenwrites    schedule 23.07.2020


Ответы (3)



Я вижу, на вашем сайте не установлен плагин JSS (в настоящее время на GH). Итак, первое, что я бы попробовал:

  1. npm i --save gatsby-plugin-jss
  2. добавить "gatsby-plugin-jss" в массив plugins: [...] в gatsby-config.js файле

(gatsby clean не повредит после всего этого, но это хорошо)

person gorhawk    schedule 03.04.2021

Я пока не использую gatsby, с точки зрения JSS мерцание может появиться, если вы удалите критический CSS перед рендерингом компонентов с помощью CSS.

person Oleg Isonen    schedule 12.12.2018