使用全局样式表时 Gatsby 中无样式内容的 Flash答案

【问题标题】：Flash of unstyled content in Gatsby when using global style sheet使用全局样式表时 Gatsby 中无样式内容的 Flash
【发布时间】：2021-01-24 21:56:55
【问题描述】：

我正在做一个 gatsby 项目，该项目一切正常，除了当我加载网站的任何页面时，因为会有一秒钟的无样式内容闪现。该问题在所有页面中都存在，我对解决此问题的研究表明，在使用样式组件时，这是一个持续存在的问题。我的项目不使用样式化组件，因为在 gatsby-browser.js 中加载样式表时，整个项目共享一个全局样式表。

下面的配置中的代码。有人可以在这里帮助我吗？

    require('dotenv').config({
    path: `.env.${process.env.NODE_ENV}`
});

module.exports = {
    siteMetadata: {
        title: 'name of site',
        siteUrl: `https://lffff.com`,
        description: `some description.`,
        author: 'name',
        image: 'image link'
    },
    pathPrefix: '/v2',
    plugins: [
        'gatsby-transformer-sharp',
        'gatsby-plugin-react-helmet',
        `gatsby-plugin-sharp`,
        `gatsby-transformer-sharp`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`
            }
        },
        {
            resolve: 'gatsby-source-contentful',
            options: {
                spaceId: process.env.CONTENTFUL_SPACE_ID,
                accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
            }
        },
        {
            resolve: 'gatsby-plugin-react-svg',
            options: {
                rule: {
                    include: /assets/
                }
            }
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `GatsbyJS`,
                short_name: `GatsbyJS`,
                start_url: `/`,
                display: `standalone`,
                icon: 'src/images/5f8e0f3ace9452d1a7fbe65b_LP_Logo_Square.png'
            }
        }
    ]

};

这是 gatsby-browser.js 中的内容

import './src/styles/globalStyles.css';

【问题讨论】：

系统是否在等待加载所有内容？
你能分享gatsby-browser.js和gatsby-ssr.js文件吗？
@AHaworth 我怎么知道它是否这样做？
@FerranBuireu 我在问题中添加了 gatsby-browser.js 中的内容。我这里没有 gatsby-ssr.js 文件
您是否正在使用路径前缀构建和服务您的网站？

标签： css reactjs gatsby styling

【解决方案1】：

您正在使用prefixed paths：

pathPrefix: '/v2',

在开发中 (gatsby develop) 路径不需要前缀，但是在构建和服务器过程中 (gatsby build && gatsby server) 是需要的规范

如果您要手动构建路径，则可以使用 withPrefix 辅助函数在生产环境中添加路径前缀。

将您的构建和服务命令更改为：

gatsby build --prefix-paths

还有：

gatsby serve --prefix-paths

如果您不使用pathPrefix，只需将其从您的配置中删除并保持您的命令与开头相同。

【讨论】：