Gatsby 在页面刷新时丢失/消失的 CSS？答案

【问题标题】：Gatsby losing/disappearing CSS on page refresh?Gatsby 在页面刷新时丢失/消失的 CSS？
【发布时间】：2020-08-28 22:17:05
【问题描述】：

我在 http://orangecountycovid19.com 上托管了一个 Gatsby 静态站点，并且在生产中一切正常并且能够刷新。即使在生产中，我也可以毫无问题地刷新，但是当我单击指向新页面的链接 (https://orangecountycovid19.com/TestingLocations/) 时，它会完美加载。这个问题是当我刷新新链接时。所有的 CSS 都消失了。

这里发生了什么？

index.js

// Imports: Dependencies
import React from 'react';
import { Helmet } from 'react-helmet';

// Imports: Pages
import Home from '../pages/Home';

// Imports: CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import '../css/MainTitle.css';
import '../css/MetricsTotals.css';
import '../css/VirusFacts.css';
import '../css/PieCharts.css';
import '../css/Legend.css';
import '../css/CasesVsDeaths.css';
import '../css/PeopleTestedVsTestCapacity.css';
import '../css/DataSource.css';
import '../css/Footer.css';
import '../css/404.css';
import '../css/TestingLocations.css';
import '../css/TestingLocationCard.css';
import '../css/AppointmentButton.css';

// Index
export default () => {
  return (
    <div>
      <Helmet>
        <meta charSet="utf-8" />
        <title>COVID-19</title>
        <html lang={'en'} />
        <link rel="canonical" href="https://orangecountycovid19.com" />
        <meta name="description" content={'Orange County, CA COVID-19 Tracker'} />
      </Helmet>

      <Home/>
    </div>
  );
};

Package.json

{
  "name": "orange-county-covid-19-tracker",
  "private": true,
  "description": "Orange County, CA COVID-19 Tracker",
  "version": "0.1.0",
  "author": "Jeff Lewis",
  "dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "britecharts-react": "^0.5.3",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^0.7.0",
    "fs-extra": "^8.1.0",
    "gatsby": "^2.19.45",
    "gatsby-plugin-google-analytics": "^2.2.1",
    "gatsby-plugin-manifest": "^2.2.48",
    "gatsby-plugin-offline": "^3.0.41",
    "gatsby-plugin-react-helmet": "^3.1.24",
    "prop-types": "^15.7.2",
    "puppeteer": "^2.1.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "covid-19",
    "coronavirus",
    "data",
    "orange county",
    "california"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

gatsby 配置

// Gatsby Config
module.exports = {
  siteMetadata: {
    title: 'Orange County COVID-19 Tracker',
    description: 'Orange County COVID-19 Tracker',
    author: 'Jeff Lewis',
  },
  pathPrefix: '/orange-county-covid-19-tracker',
  plugins:[
    // React Helmet
    'gatsby-plugin-react-helmet',
  ],
};

【问题讨论】：

标签： javascript css reactjs gatsby

【解决方案1】：

问题

查看您网站的 html 后，问题在于您的新页面模板，该模板没有 style 标记。

说明

你的主页有<style data-href="/styles.7a35604e63a292c1e7f0.css">，所以当你访问主页时它会完美加载，从那里开始，一切都是单页应用程序。

这在您的子页面中不存在，在其head 标记中没有提及style 标记。

清单

您是否对子页面使用不同的模板？
此标签是否有任何条件适用？
您是否在模板/布局/组件中导入scss/css 文件？类似import './style.scss';。

工作示例

我有一个使用 Gatsby 和 Helmet 运行的网站。这是我的src/layouts/index.jsx 文件：

import React from 'react';
import Helmet from 'react-helmet';
import '../assets/scss/init.scss';

class Layout extends React.Component {
  render() {
    const { children } = this.props;
    const { title, subtitle } = this.props.data.site.siteMetadata;

    return (
      <div className="layout">
        <Helmet defaultTitle={`${title} | ${subtitle}`} />
        {children()}
      </div>
    );
  }
}

export default Layout;

export const layoutQuery = graphql`
  query LayoutQuery {
    site {
      siteMetadata {
        title
        subtitle
        description
      }
    }
  }
`;

【讨论】：

感谢您的意见！我并不熟悉 react-helmet 的作用，但我更新了代码以包含 index.js 文件
你的道具来自哪里，因为那是索引文件，我需要包括孩子吗？这就是它不渲染 css 的原因吗？
每个子页面都是一个组件，使用作为 Gatsby 一部分的 children() 呈现。该代码是索引布局 (/layouts/index.jsx)，而不是索引页面。