Css 盖茨比问题-在加载和刷新时，我看到未定型组件闪烁

问题-当我第一次加载页面或刷新页面时，在我自己的CSS应用之前，我会看到一些丑陋的未设置样式的功能，如大量图像、链接返回到带有下划线的蓝色文本的自定义样式等

这是我的package.json文件-

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.7.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.9.0",
    "gatsby-plugin-mdx": "^1.5.0",
    "gatsby-plugin-sharp": "^2.9.1",
    "gatsby-plugin-styled-components": "^3.5.0",
    "gatsby-remark-images": "^3.6.0",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-transformer-sharp": "^2.7.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "2.1.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

这是我的盖茨比配置文件-

module.exports = {
  siteMetadata: {
    title: "Gatsby Project",
    description: "",
    image: "/logo.png",
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: { maxWidth: 1200 },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`roboto-mono`, `muli\:400,400i,700,700i`],
        display: "swap",
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        icon: `src/images/logo.png`,
      },
    },
  ],
}

我是缺少依赖性还是配置中有错误？不确定

---

任何建议都将不胜感激

通常，与样式化组件（称为FOUT，FlashoFUnstyledText）相关的此类问题可以通过检查缺少的配置来解决，但在您的情况下，似乎您已经在

gatsby config.js

中正确设置了所有内容，并且已经安装了所有软件包

您可以尝试删除

gatsby插件google font

，因为通常在处理字体时，加载JavaScript时会阻止渲染。根据：

异步使用Web字体加载器可以避免阻塞页面 加载JavaScript时。请注意，如果使用脚本 以异步方式，页面的其余部分可能在Web字体之前呈现 加载并执行加载器，这可能会导致未设置样式的闪存 文本（FOUT）

如果通过删除此项解决了问题，则可能需要找到另一种方法来全局添加字体

---

信用：在此

中，通常通过检查缺少的配置来解决与样式化组件相关的此类问题（称为FOUT、FlashoFUnstyledText），但在您的情况下，似乎您已经在

gatsby config.js

中正确设置了所有内容，并且已经安装了所有软件包

您可以尝试删除

gatsby插件google font

，因为通常在处理字体时，加载JavaScript时会阻止渲染。根据：

异步使用Web字体加载器可以避免阻塞页面 加载JavaScript时。请注意，如果使用脚本 以异步方式，页面的其余部分可能在Web字体之前呈现 加载并执行加载器，这可能会导致未设置样式的闪存 文本（FOUT）

如果通过删除此项解决了问题，则可能需要找到另一种方法来全局添加字体

---

信用证：在此

中，浏览器的控制台是否提示任何日志？它是否发生在所有页面中？是的，它发生在所有页面中，并且控制台中没有错误或提示：（@FerranBuireu是浏览器的控制台，提示任何日志？它是否发生在所有页面中？是的，它发生在所有页面中，并且控制台中没有错误或提示：（@FerranBuireu）