Question

我在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-config

// 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',
  ],
};

Answer 1

问题

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

说明

您的主页上有<style data-href="/styles.7a35604e63a292c1e7f0.css">，因此当您访问主页时，它可以完美加载，并且从那里开始，所有内容都是一个单页应用程序。

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

清单

您是否为子页面使用其他模板？
此标签是否有条件适用？
您是否要在模板/布局/组件中导入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
      }
    }
  }
`;

Gatsby在页面刷新中丢失/消失了CSS？

1 个答案:

问题

说明

清单

工作示例