gatsby.js 如何渲染 CSS？

Question

我正在使用帶有樣式組件的 gatsby.js 來開發我的投資組合，並且當我第一次加載我的網站時它沒有呈現任何 CSS 時。 但是，當我刷新頁面時，它會正確呈現所有 CSS。 可能是什么原因？ 這是我的投資組合： https://haribhandari.me

第一次打開鏈接時，CSS 將不會加載，但是，如果您刷新它會加載。

Answer 1

使用樣式化組件時，生產中的 Gatsby 可能無法正確渲染 styles。 要解決此問題，請按照以下說明操作：

安裝以下軟件包：

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
      },
    },
  ],
}

文檔中描述了更多信息

Answer 2

讓其他人幫助您的一個好方法是提供一些代碼片段，因為僅在瀏覽器工具中通過您網站的代碼很難 go。

我不是蓋茨比專家，希望有人可以幫助您更好地理解這個概念。 我會調查你的<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 proper

我還注意到您的菜單不會滾動到您的項目部分，您可能還想查看該代碼。

希望這可以幫助

gatsby.js 如何渲染 CSS？

問題描述

2 個解決方案

解決方案1
-1 已采納 2021-04-03 17:07:33

解決方案2
-2 2021-04-03 16:05:57

gatsby.js 如何渲染 CSS？

問題描述

2 個解決方案

解決方案1 -1 已采納 2021-04-03 17:07:33

解決方案2 -2 2021-04-03 16:05:57

解決方案1
-1 已采納 2021-04-03 17:07:33

解決方案2
-2 2021-04-03 16:05:57