gatsby - 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,
    {
      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在 plugins 数组中明确列出（就像gatsyby-plugin-react-helmet），而不是具有 resolve 和 options 属性的对象，但没有运气。

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

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

感谢 Stack Overflow 社区❤️

标签： gatsbyserver-side-renderingserverside-javascriptjss

gatsby - Gatsby JSS 在页面加载时出现“闪烁”

问题描述

解决方案

推荐阅读