NextJS 构建破坏 @material-ui/core 和 react-bootstrap 导入答案

【问题标题】：NextJS Build breaking @material-ui/core & react-bootstrap importsNextJS 构建破坏 @material-ui/core 和 react-bootstrap 导入
【发布时间】：2020-01-02 17:49:59
【问题描述】：

所以我已经阅读过，我可以看到这是很常见的事情，但遗憾的是我能找到的所有解决方案都不适合我。

在 npm run dev 模式下，项目正常，我的所有导入工作。

import { Typography } from "@material-ui/core";
import Card from 'react-bootstrap/Card'

我如何在页面中导入的示例，但是第二次我 npm 运行 build 并转到页面，这些导入似乎失败了，我只是没有从它们那里得到 CSS。

这是我的 next.config.js 文件

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

我会假设我需要给它 materialUI 和 react-bootstrap？我的尝试失败了。

对此的任何帮助将不胜感激，不知道为什么它不会构建。

这是我的 package.json

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next export"
  },
  "dependencies": {
    "@material-ui/core": "^4.8.2",
    "@material-ui/icons": "^4.5.1",
    "@zeit/next-css": "^1.0.1",
    "bootstrap": "^4.4.1",
    "next": "9.1.6",
    "next-compose-plugins": "^2.2.0",
    "nextjs-sitemap-generator": "^0.4.2",
    "react": "16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "16.12.0",
    "styled-components": "^4.4.1"
  }
}

【问题讨论】：

您能否将应用程序的最小部分（可以重现所描述的问题）推送到 github 并发送链接以便我重现它？
github.com/Cobwebster/SuffolkDaily 有没有我遗漏的文件？ next.js 很新，所以不确定重要的文件是什么。
使用您提供的代码，我做了一些小的导入修复并运行了npm run build 和npm start。在http://localhost:3000 上一切运行良好。这是我提出的拉取请求，向您展示了我所做的更改github.com/Cobwebster/SuffolkDaily/pull/1
我制作了一个视频，向您展示我在本地的样子。我希望它有所帮助。 youtu.be/_HwgoXMxQXY.

标签： javascript css material-ui next.js react-bootstrap

【解决方案1】：

这是material-ui 从版本4.3+ 面临的常见问题。它可以通过使用_document.js 预加载 CSS 来克服。

link 对此进行了广泛的描述。为了简洁起见，我在这里添加它。在_document.js 中添加以下代码，CSS 应该看起来还不错。

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/styles'
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'

const theme = responsiveFontSizes(createMuiTheme())

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
          />
          <style jsx global>
            {`
              html,
              body {
                height: 100%;
                width: 100%;
              }
              *,
              *:after,
              *:before {
                box-sizing: border-box;
              }
              body {
                font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
                font-size: 1rem;
                margin: 0;
              }
            `}
          </style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async ctx => {
  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      <React.Fragment key="styles">
        {initialProps.styles}
        {sheets.getStyleElement()}
      </React.Fragment>
    ]
  }
}

export default MyDocument

【讨论】：