Gatsby JSS页面加载时的"Flicker“

Question

在我的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,
    {
      resolve: gatsby-plugin-jss,
      options: {},
    },
    {
      resolve: gatsby-source-filesystem,
      options: {
        name: src,
        path: ${__dirname}/src/,
      },
    },
    {
      resolve: gatsby-transformer-remark,
      options: {
        plugins: [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',
        display: 'minimal-ui',
        icon: 'src/images/logo.png', // This path is relative to the root of the site.
      },
    },
    gatsby-plugin-offline,
    'gatsby-plugin-netlify',
  ],
}

​

我也尝试过在插件数组中简单地列出gatsby-plugin-jss (就像gatsyby-plugin-react-helmet一样)，而不是在对象中使用resolve和options属性，但没有成功。

这就是我自己能够收集的故障排除的程度，我不知道其他诊断或修复这个问题的方法。这个问题在开发模式下不是在本地发生的，只有在构建并部署到Netlify之后才会发生。

如果您有兴趣，请随意拉下代码并四处查看。https://github.com/dillonmorris91/portfoliodm。

感谢堆栈溢出社区❤️

Answer 1

主页的样式需要在主CSS之前声明

你可以使用：gatsby-plugin-global-styles

它使您能够重新排序标题中的样式标签。我把我的放得尽可能高，它解决了我的问题。

Answer 2

我看到你的网站没有安装JSS插件(目前在GH上)。所以我要做的第一件事是：

将

1. npm i --save gatsby-plugin-jss
2. add "gatsby-plugin-jss"连接到gatsby-config.js file

中的plugins: [...]阵列

(经过这一切，gatsby clean不会有什么坏处，但它可以继续运行了)

Answer 3

我还没有使用gatsby，从JSS的角度来看，如果您在使用CSS呈现组件之前删除关键CSS，则可能会出现闪烁。