NextJS wrong CSS order on production build

问题

I import CSS files from local files and node modules:

//> 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";

This works as intended on my local development version. All styles appear as they should be.

As you can see here, the styling is different on local and production. (Take a look at font and buttons)

(Development left, Production right)

My next.config.js is:

//#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
 */

It seems the MDB styling is being overwritten by bootstrap on building the app. I deploy my app by using next build && next export && firebase deploy and use the ./out folder for deployment source.

You can find the code here: https://github.com/aichner/nextjs-redux-template

来源：https://stackoverflow.com/questions/64088186/nextjs-wrong-css-order-on-production-build

标签

javascript

reactjs

Webpack

next.js