gatsby.js 如何渲染 CSS？

Question

我使用 gatsby.js 和样式化的组件来开发我的作品集，当我第一次加载我的网站时它没有呈现任何 CSS。但是，当我刷新页面时，它会正确呈现所有 CSS。可能是什么原因？这是我的投资组合：https://haribhandari.me

第一次打开 link 时，CSS 不会加载，但是，如果您刷新它会加载。

Answer 1

让其他人帮助您的一个好方法是提供一些代码片段，因为仅在浏览器工具中很难浏览您网站的代码。

我不是盖茨比专家，希望有人能帮助你更好地理解这个概念。我会查看您的 <head> 部分。

<link as="script" rel="preload" href="/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js">

这里有一个关于这个问题的类似话题Gatsby v2 site does not load CSS properly

我还注意到您的菜单没有滚动到您的项目部分，您可能也想看看该代码。

希望对您有所帮助

Answer 2

使用带样式的组件时，生产环境中的 Gatsby 可能无法正确呈现样式。要解决此问题，请按照以下说明操作：

安装以下软件包：

npm install gatsby-plugin-styled-components styled-components
   babel-plugin-styled-components

编辑gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },
  ],
}

documentation

中描述了更多信息

gatsby.js 如何渲染 CSS？

How does gatsby.js render CSS?

javascript

reactjs

gatsby