我有一个托管在 http://orangecountycovid19.com 的盖茨比静态站点，在生产中一切正常，并且能够刷新。即使在生产中，我也可以毫无问题地刷新，但是当我单击指向新页面的链接(https://orangecountycovid19.com/TestingLocations/(时，它会完美加载。这个问题是当我刷新新链接时。所有的css都消失了。
这是怎么回事？
索引.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
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',
],
};
问题
查看您网站的 html 后，问题出在新页面的模板中没有style标记。
解释
您的主页有<style data-href="/styles.7a35604e63a292c1e7f0.css">，因此当您访问主页时它会完美加载，从那里开始，一切都是单页应用程序。
这在您的子页面中不存在，其head标记中没有提及style标记。
清单
-
是否对子页面使用不同的模板？
-
是否有任何条件适用于此标签？
-
您是否在模板/布局/组件中导入
scss/css文件？像import './style.scss';.
工作示例
我有一个网站与盖茨比一起运行，也有头盔。这是我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
}
}
}
`;