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

IT技术 javascript reactjs webpack next.js
2021-05-03 15:19:18

我从本地文件和节点module导入 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

1个回答

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

  1. 在 pages 目录下创建_document.js。
  2. 使用以下代码填充文件：
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 使用先前的上下文。上面的代码就是这样做的。

其它你可能感兴趣的问题
上一篇ReactJS 部署应用程序错误无法复制到剪贴板：命令失败：xsel --clipboard --input 下一篇MUI Button 悬停背景颜色和文本颜色