页面加载时 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: [
    <code>gatsby-plugin-react-helmet</code>,
    {
      resolve: <code>gatsby-plugin-jss</code>,
      options: {},
    },
    {
      resolve: <code>gatsby-source-filesystem</code>,
      options: {
        name: <code>src</code>,
        path: <code>${__dirname}/src/</code>,
      },
    },
    {
      resolve: <code>gatsby-transformer-remark</code>,
      options: {
        plugins: [<code>gatsby-remark-prismjs</code>],
      },
    },
    {
      resolve: <code>gatsby-plugin-manifest</code>,
      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.
      },
    },
    <code>gatsby-plugin-offline</code>,
    'gatsby-plugin-netlify',
  ],
}

我也尝试过在插件数组中明确列出 gatsby-plugin-jss(就像 gatsyby-plugin-react-helmet)而不是对象具有 resolve 和 options 属性，运气不好。

这就是我能够自行解决问题的程度，我不知道其他诊断或解决此问题的方法。这个问题在开发模式下不会在本地发生，只会在构建并部署到 Netlify 时发生。

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

谢谢 Stack Overflow 社区 ❤️

Answer 1

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

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

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