NextJS 在生产构建中错误的 CSS 顺序答案

【问题标题】：NextJS wrong CSS order on production buildNextJS 在生产构建中错误的 CSS 顺序
【发布时间】：2021-01-13 05:02:36
【问题描述】：

我从本地文件和节点模块导入 CSS 文件：

//> Global Styling
// Local
import "../styles/globals.scss";
// Icons
import "@fortawesome/fontawesome-free/css/all.min.css";
// Bootstrap
import "bootstrap-css-only/css/bootstrap.min.css";
// Material Design for Bootstrap
import "mdbreact/dist/css/mdb.css";

这在我的本地开发版本上按预期工作。所有样式均按应有的方式显示。

正如您在此处看到的，本地和生产中的样式不同。（看看字体和按钮）

（开发左，生产右）

我的next.config.js 是：

//#region > Imports
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");
//#endregion

//#region > Exports
module.exports = [
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    },
  }),
  withPlugins([withCSS, withFonts, withImages]),
];
//#endregion

/**
 * SPDX-License-Identifier: (EUPL-1.2)
 * Copyright © 2020 InspireMedia GmbH
 */

在构建应用程序时，引导程序似乎覆盖了 MDB 样式。我使用next build && next export && firebase deploy 部署我的应用程序，并使用./out 文件夹作为部署源。

您可以在这里找到代码：https://github.com/aichner/nextjs-redux-template

【问题讨论】：

看来你不是唯一拥有这个issue的人。简而言之，代码拆分正在破坏生产中的导入顺序。我建议在问题中发布您的回购。
有什么解决办法吗？？我也面临同样的问题

标签： javascript reactjs webpack next.js

【解决方案1】：

如果问题是样式不正确。（因为您使用的是 material-ui）：

在pages目录下创建_document.js。
用以下代码填写文件：

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles"; // works with @material-ui/core/styles, if you prefer to use it.
import theme from "../Theme"; // change this theme path as per your project

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Not exactly required, but this is the PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // 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.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

原因： Material UI 在幕后使用上下文来应用其样式。由于 NextJs 服务端渲染，这个上下文将会丢失。所以，我们需要告诉 Next 使用之前的上下文。上面的代码就是这样做的。

【讨论】：