NextJS 構建突破性的 @material-ui/core 和 react-bootstrap 導入

Question

所以我已經閱讀了，我可以看到這是一件很常見的事情，但遺憾的是我能找到的所有解決方案都不適合我。

在 npm run dev 模式下，項目很好，我所有的導入都可以工作。

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

我如何在頁面中導入的示例，但是第二次我 npm run 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"
  }
}

Answer 1

它是為面臨的共同問題material-ui從版本4.3 +。 它可以通過使用_document.js預加載 CSS 來_document.js 。

它已在此鏈接中進行了廣泛的描述。 為了簡潔起見，我在這里添加它。 在_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

NextJS 構建突破性的 @material-ui/core 和 react-bootstrap 導入

問題描述

1 個解決方案

解決方案1
1 2020-05-14 20:43:31

NextJS 構建突破性的 @material-ui/core 和 react-bootstrap 導入

問題描述

1 個解決方案

解決方案1 1 2020-05-14 20:43:31

解決方案1
1 2020-05-14 20:43:31