我正在构建我的第一个 gatsby 网站，但在部署过程中遇到了一些 CSS 问题。
首先，当我加载site 时，没有加载任何css - 但是当我点击latest promotions/hktaxi（已完成的页面）然后点击epayment services（链接回index.js - 与主页相同）， CSS加载。我最初认为这是一个 netlify 问题，这也是我决定将它部署到 github 页面的原因——但页面在两个平台上看起来完全一样。
页面在网络上是响应式的，但在移动设备上不是。我已经在线阅读了解决方案，视口的元标记应该放在我的 html 文件中 - 但是，我没有。我应该创建一个html.js 文件并在那里插入元标记吗？
将 repo 放在这里以获得可重复性：github.com/claudiahleung/gatsby-learnings
谢谢！
【问题讨论】：
标签： html css gatsby responsive
缺乏实施，但有几美分和一堆似是而非的原因：
根据所描述的行为，您似乎有一些hydration 问题。在初始渲染点，没有任何样式被加载或应用，但是当您前后移动（发生补液的地方）时，它会加载。当您通过直接指向 DOM 而不是 React 的虚拟 DOM (vDOM) 来阻止水合时，通常会出现此问题，例如，当在 React 的范围之外请求 window 或 document 时（没有钩子）。
也就是说，这是一个实施问题，而不是 Netlify 或 GitHub 问题。这应该（并且必须）在本地构建您的项目时发生，因为最终，Netlify 所做的是在他们的服务器上构建您的项目，您应该能够通过gatsby build && gatsby serve 在本地复制它。如果本地事情按预期工作，您可能会开始考虑 Netlify 问题（通常与环境之间的节点版本不匹配有关）。
在您的情况下，我很确定您的问题是因为您使用的是 styled-components 但您没有阅读implementation details in Gatsby's docs，因为您缺少gatsby-config.js 中所需的插件和详细信息，例如：
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
这根本不是真的，您可以customize the HTML output（因为 Gatsby 允许您这样做）并按照您的意愿操作它，添加所需的元标记（这不是您问题的解决方案）。只需运行：
cp .cache/default-html.js src/html.js
或者手动将default-html.js从.cache文件夹复制到/src并重命名为html.js。如果 Gatsby 在编译项目时在 /src 文件夹下找到该文件，会将其用作编译代码的“模板”。它看起来像：
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
超出了问题的范围。我建议忽略.cache 和public 文件夹，将它们添加到.gitignore 文件中。它们是在每个项目编译中自动生成的，它可能会导致一些 Git 冲突（除非你是唯一的贡献者），但最好不要推送它以避免存储库中的噪音。
【讨论】：
gatsby-plugin-styled-components 添加到我的配置文件中，但我的 github 页面站点看起来相同（例如 janky index.js，css 不适用于移动设备）。 index.js 在本地看起来不错，并且由于 netlify 使用优化的构建（从gatsby build 生成的静态 html），我认为问题发生在那里。我会更多地研究水合作用，并尝试html.js 我的移动 css
gatsby-plugin-styled-components 对 netlify 有效（index.js 现在加载所有 css 样式 + 在移动设备上工作），但没有改变 github 页面上的任何内容。我不确定这是否与gh-pages 和main 分支有关，但我很高兴netlify 的工作。谢谢！ :)