Question

我不确定从哪里开始对gatsby / netlify问题进行故障排除。当我在本地运行gatsby develop时，我的站点看起来是一种方式，当我部署到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"
  }
}

https://codesandbox.io/s/github/kpennell/berlinmusicmap/tree/master/?fontsize=14

Answer 1

开始gatsby build时CSS注入顺序是一个起点。如果不先注入材料，则UI样式可能会混乱。

如何在gatsby插件中执行此操作： https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/#advanced
从MUI文档中：https://material-ui.com/styles/advanced/#css-injection-order

Answer 2

您可以尝试在本地计算机上运行gatsby build && gatsby serve吗？然后转到localhost:9000查看布局是否全部搞乱了。

通常，最好通过运行此命令来检查Gatsby网站的内部版本。特别是由于Netlify the的新构建时间定价

该问题可能独立于Netlify并与Material UI相关。

检查此问题：https://github.com/mui-org/material-ui/issues/18197，您可能会在其中找到一些有用的信息。

Answer 3

我（貌似）将字面上的gatsby-browser.js复制到gatsby-ssr.js（wrapRootElement + wrapPageElement）来解决。我仍然不太确定为什么这行得通-我需要在Gatsby的文档中阅读有关这些内容的更多信息。

亲爱的沮丧/失落的人，将来会看到gatsby develop和gatsby build之间的古怪的CSS ....如果您使用的是React Context，请尝试逐字复制两个文件之间的wrapRootElement / wrapPageElement

使用Gatsby时如何在Netlify上修复损坏的CSS？

3 个答案: