使用盖茨比时，如何修复Netlify上损坏的CSS？

我不知道从哪里开始解决盖茨比/netlify问题。当我在本地运行

gatsby develope

时，我的站点看起来是一种方式，而当我部署到Netlify时，它又是另一种方式

从哪里开始修复/排除此类问题

我的gatsby-config.js

const dotenv = require("dotenv")

dotenv.config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Berlin Music Map`,
    description: "Find live music in Berlin",
    author: `Kyle Pennell`,
  },
  plugins: [

    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    `gatsby-plugin-react-helmet`,
    // {
    //   resolve: "gatsby-plugin-remote-images",
    //   options: {
    //     nodeType: "item",
    //     imagePath: "thumbnail",
    //     name: 'optimized_thumbnail',
    //   }
    // },
    {
      resolve: "gatsby-plugin-remote-images",
      options: {
        nodeType: "item",
        imagePath: "soundcloud_artwork", 
        name: 'optimized_soundcloud_artwork',
      }
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,

      },
    },
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {

        theme: {
          palette: {
            primary: {
              lighter: '#47B3C0',
              light: '#397AB2',
              main: '#005691',
              dark: '#202E5F',
            },
            secondary: {
              lighter: '#FFECC4',
              light: '#FED969',
              main: '#E7A700',
              dark: '#C45527',
            },
          },

          typography: {
            html:{
              fontSize:"14px"
            },
            h1: {

              fontSize: "3.052em"
            },

            h2: {fontSize: "2.441em"},

            h3: {fontSize: "1.953em"},

            h4: {fontSize: "1.563em"},

            h5: {fontSize: "1.25em"},

            h6: {fontSize: "1.05em"},


            fontFamily: '"Raleway", "Open Sans", "Arial", sans-serif',

            useNextVariants: true,
          },




      },
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

package.json

    {
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@material-ui/core": "^4.5.1",
    "@material-ui/icons": "^4.5.1",
    "@tippy.js/react": "^3.0.1",
    "axios": "^0.19.0",
    "dotenv": "^8.0.0",
    "gatsby": "^2.17.7",
    "gatsby-cli": "^2.8.8",
    "gatsby-image": "^2.2.29",
    "gatsby-plugin-layout": "^1.1.13",
    "gatsby-plugin-manifest": "^2.2.25",
    "gatsby-plugin-material-ui": "^2.1.6",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.10",
    "gatsby-plugin-remote-images": "^1.0.7",
    "gatsby-plugin-sharp": "^2.2.32",
    "gatsby-remark-copy-linked-files": "^2.0.11",
    "gatsby-remark-images": "^3.0.1",
    "gatsby-remark-relative-images": "^0.2.1",
    "gatsby-source-filesystem": "^2.1.35",
    "gatsby-transformer-remark": "^2.3.4",
    "gatsby-transformer-sharp": "^2.1.9",
    "google-map-react": "^1.1.5",
    "lodash": "^4.17.15",
    "memoize-one": "^4.0.2",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-fa": "^5.0.0",
    "react-helmet": "^5.2.0",
    "react-player": "^1.11.1",
    "react-soundcloud-player": "^1.1.1",
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-window": "^1.2.2",
    "tippy.js": "^5.0.1"
  },
  "devDependencies": {
    "prettier": "^1.16.4"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

{
“名称”：“盖茨比起动器默认值”，
“私人”：没错，
“描述”：“与盖茨比一起迅速崛起和发展的简单开端”，
“版本”：“0.1.0”，
“作者”：“凯尔·马修斯”，
“依赖项”：{
“@material ui/core”：“^4.5.1”，
“@材质界面/图标”：“^4.5.1”，
“@tippy.js/react”：“^3.0.1”，
“axios”：“^0.19.0”，
“dotenv”：“^8.0.0”，
“盖茨比”：“^2.17.7”，
“盖茨比cli”：“^2.8.8”，
“盖茨比形象”：“^2.2.29”，
“盖茨比插件布局”：“^1.1.13”，
“盖茨比插件清单”：“^2.2.25”，
“盖茨比插件材料界面”：“^2.1.6”，
“盖茨比插件离线”：“^2.0.25”，
“盖茨比头盔”：“^3.0.10”，
“盖茨比插件远程图像”：“^1.0.7”，
“盖茨比夏普插件”：“^2.2.32”，
“盖茨比备注复制链接文件”：“^2.0.11”，
“盖茨比评论图片”：“^3.0.1”，
“盖茨比评论相关图片”：“^0.2.1”，
“盖茨比源文件系统”：“^2.1.35”，
“盖茨比变压器备注”：“^2.3.4”，
“盖茨比变形金刚”：“^2.1.9”，
“谷歌地图反应”：“^1.1.5”，
“lodash”：“^4.17.15”，
“记忆一个”：“^4.0.2”，
“时刻”：“^2.24.0”，
“道具类型”：“^15.7.2”，
“反应”：“^16.8.4”，
“react dom”：“^16.8.4”，
“反应fa”：“^5.0.0”，
“反应头盔”：“^5.2.0”，
“反应玩家”：“^1.11.1”，
“react soundcloud player”：“^1.1.1”，
“react虚拟化自动分级器”：“^1.0.2”，
“反应窗口”：“^1.2.2”，
“tippy.js”：“^5.0.1”
},
“依赖性”：{
“更漂亮”：“^1.16.4”
},
“关键词”：[
“盖茨比”
],
“许可证”：“麻省理工学院”，
“脚本”：{
“建造”：“盖茨比建造”，
“开发”：“盖茨比开发”，
“格式”：“更漂亮——写src/***.{js，jsx}”，
“开始”：“npm运行开发”，
“发球”：“盖茨比发球”，
“测试”：“echo\”写测试！->https://gatsby.dev/unit-testing\""
},
“存储库”：{
“类型”：“git”，
“url”：”https://github.com/gatsbyjs/gatsby-starter-default"
},
“臭虫”：{
“url”：”https://github.com/gatsbyjs/gatsby/issues"
}
}

---

执行《盖茨比》构建时的CSS注入顺序是一个开始。如果不首先注入材质UI样式，它们可能会变得混乱

• 如何在盖茨比插件中执行此操作：
• 从MUI文档：

---

您能否尝试在本地计算机上运行

gatsby build和&gatsby service

？然后转到

localhost:9000

，查看您的布局是否混乱

一般来说，通过运行此命令检查Gatsby站点的构建版本是很好的。尤其是NetlifyI的新构建时定价（似乎）通过将我的gatsby-browser.js复制到gatsby-ssr.js（wraprotement+wrapPageElement）解决了这个问题。我仍然不能完全确定为什么会这样——我需要在盖茨比的文档中读更多关于这些的内容

---

亲爱的沮丧/迷茫的未来之人看到了

gatsby develop

和

gatsby build

之间古怪的不同CSS…如果您使用的是React上下文，请尝试在两个文件之间逐字复制您的wraprootement/wrapPageElement。

谢谢。超级挑战这类问题你帮我节省了两个小时。非常感谢。