页面加载时 Gatsby JSS“闪烁”

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 。

谢谢 Stack Overflow 社区 ❤️

Answer 1

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

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

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

Answer 2

我看到您的网站没有安装 JSS 插件（目前在 GH 上）。 所以我会尝试的第一件事是：

1. npm i --save gatsby-plugin-jss
2. 将"gatsby-plugin-jss"添加到plugins: [...]文件中的gatsby-config.js数组

（在这一切之后， gatsby clean不会受到伤害，但它很好）

Answer 3

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