2

问题 - 当我第一次加载页面或刷新页面时，在我自己的 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`,
      },
    },
    {
      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`,
      },
    },
  ],
}

我是否缺少依赖关系或者我的配置中有错误？没有把握..

我们欢迎所有的建议！

4

1 回答 1

0

通常，这种与样式化组件（称为 FOUT，无样式文本的 Flash）相关的问题是通过检查缺少的配置来解决的，但是在您的情况下，您似乎已经正确设置了所有内容，并且您拥有所有安装的软件包。gatsby-config.js

您可以尝试的一件事是gatsby-plugin-google-fonts在加载 JavaScript 时通常在处理 font-face 块渲染时删除因为。根据https://github.com/typekit/webfontloader：

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

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

致谢：@LekoArts在这个Spectrum 主题中

于 2021-01-04T19:04:44.187 回答