Как исправить поврежденный CSS на Netlify при использовании Gatsby? - PullRequest
1 голос
/ 07 ноября 2019

Я не уверен, с чего начать устранение проблемы с 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"
  }
}

enter image description here

enter image description here

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

Ответы [ 3 ]

1 голос
/ 09 ноября 2019

Можете ли вы попробовать запустить gatsby build && gatsby serve на локальном компьютере? Затем перейдите к localhost:9000, чтобы проверить, не испортился ли ваш макет.

Как правило, хорошо проверить встроенную версию сайта Gatsby, выполнив эту команду. Тем более что новая цена Netlify во время сборки ?

Эта проблема может быть независимой от Netlify и связана с пользовательским интерфейсом материалов.

Проверьте эту проблему: https://github.com/mui-org/material-ui/issues/18197 вы можете найти несколько полезныхинформация в нем.

1 голос
/ 08 ноября 2019

Порядок внедрения CSS при выполнении gatsby build - это место для начала. Стили пользовательского интерфейса материала могут быть испорчены, когда они не вводятся первыми.

0 голосов
/ 10 ноября 2019

Я (похоже) решил эту проблему, буквально скопировав то, что у меня было gatsby-browser.js, в gatsby-ssr.js (wrapRootElement + wrapPageElement). Я до сих пор не совсем уверен, почему это сработало - мне нужно больше узнать об этом в документах Гэтсби.

Уважаемый разочарованный / потерянный человек из будущего, увидевший странный разный CSS между gatsby develop и gatsby build .... если вы используете React Context, попробуйте дословно скопировать ваш wrapRootElement / wrapPageElement между двумя файлами.

...