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-react-helmet清楚地列在plugins数组中（就像gatsby-plugin-jss），而不是带有resolve和options属性的对象，没有运气。

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

如果您愿意的话，可以随意下拉代码并四处张望。 https://github.com/dillonmorris91/portfoliodm。

谢谢Stack Overflow社区❤️

Answer 1

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

Answer 2

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

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

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

Answer 3

我看到您的站点没有安装 JSS 插件（目前在 GH 上）。所以我首先要尝试：

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

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

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

3 个答案: