盖茨比在页面刷新时丢失/消失 CSS？

Question

盖茨比在页面刷新时丢失/消失 CSS？

jef*_*wis 4 javascript css reactjs gatsby

我在http://orangecountycovid19.com上托管了一个 Gatsby 静态站点，一切都在生产中运行良好，并且能够刷新。即使在生产中，我也可以毫无问题地刷新，但是当我单击指向新页面的链接 ( 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>
  );
};

Run Code Online (Sandbox Code Playgroud)

包.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

盖茨比配置

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ign*_*ago 5

问题

查看您网站的 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
      }
    }
  }
`;

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，8 月前
查看次数：	1775 次
最近记录：	5 年，8 月前