Gatsby 问题 - 在加载和刷新时，我看到无样式组件闪烁

问题描述

问题 - 当我第一次加载页面或刷新页面时，我会看到一些丑陋的无样式功能，例如大量图像、链接返回到带有下划线的蓝色文本的自定义样式等）之前自己的 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"
  }
}

这是我的 gatsby-config 文件 -

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`,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、Flash of Unstyled T ext) 是通过检查缺少的配置来解决的，但在您的情况下，您的 gatsby-config.js 中似乎已正确设置了所有内容，并且已安装所有软件包。

您可以尝试删除 gatsby-plugin-google-fonts 的一件事，因为通常在处理 font-face 时会在加载 JavaScript 时阻止渲染。根据{{​​3}}：

异步使用 Web Font Loader 可避免阻塞您的页面 在加载 JavaScript 时。请注意，如果使用脚本 异步，页面的其余部分可能在 Web 字体之前呈现 Loader 加载并执行，会导致 Flash 的 Unstyled 文本 (FOUT)。

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

积分：https://github.com/typekit/webfontloader 在此@LekoArts