NextJS在生产版本上的CSS顺序错误

Question

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