我不确定从哪里开始解决 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',
],
}
包.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
最佳答案
gatsby build 时的 CSS 注入(inject)顺序是一个起点。如果不先注入(inject) Material UI 样式，它们可能会变得困惑。
关于css - 使用 Gatsby 时如何修复 Netlify 上损坏的 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58750099/