我有一个Gatsby静态网站，托管在 http:/orangecountycovid19.com 并且在生产中一切正常，能够刷新。即使在生产中我也能顺利刷新，但当我点击新页面的链接时(https:/orangecountycovid19.comTestingLocations。)，它完美地加载。这个问题是当我刷新新链接的时候。所有的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>
);
};
包裹.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">因此，当你访问主页时，它就会完美地加载，从那里开始，所有的东西都是一个单页应用程序。
这在你的子页面中是不存在的，它没有提到任何的应用程序。style 标签中的 head 标签。
你是否对子页面使用了不同的模板？
是否有任何条件适用于这个标签？
你是否导入了 scsscss 在您的模板布局组件中的文件？类似于 import './style.scss';.
我有一个网站运行与Gatsby，与头盔也。这是我的 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
}
}
}
`;