title: NextJS wrong CSS order on production build
body: <p>I import CSS files from local files and node modules:</p>
  <pre><code>//&gt; Global Styling
  // Local
  import &quot;../styles/globals.scss&quot;;
  // Icons
  import &quot;@fortawesome/fontawesome-free/css/all.min.css&quot;;
  // Bootstrap
  import &quot;bootstrap-css-only/css/bootstrap.min.css&quot;;
  // Material Design for Bootstrap
  import &quot;mdbreact/dist/css/mdb.css&quot;;
  </code></pre>
  <p>This works as intended on my local development version. All styles appear as they should be.</p>
  <p>As you can see here, the styling is different on local and production.
  (Take a look at font and buttons)</p>
  <p><a href="https://i.stack.imgur.com/n4Eld.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/n4Eld.jpg" alt="Development left, Production right" /></a>
  <em>(Development left, Production right)</em></p>
  <p>My <code>next.config.js</code> is:</p>
  <pre><code>//#region &gt; Imports
  const withSass = require(&quot;@zeit/next-sass&quot;);
  const withCSS = require(&quot;@zeit/next-css&quot;);
  const withFonts = require(&quot;next-fonts&quot;);
  const withImages = require(&quot;next-images&quot;);
  const withPlugins = require(&quot;next-compose-plugins&quot;);
  //#endregion
  
  //#region &gt; Exports
  module.exports = [
    withSass({
      webpack(config, options) {
        config.module.rules.push({
          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
          use: {
            loader: &quot;url-loader&quot;,
            options: {
              limit: 100000,
            },
          },
        });
  
        return config;
      },
    }),
    withPlugins([withCSS, withFonts, withImages]),
  ];
  //#endregion
  
  /**
   * SPDX-License-Identifier: (EUPL-1.2)
   * Copyright © 2020 InspireMedia GmbH
   */
  </code></pre>
  <p>It seems the MDB styling is being overwritten by bootstrap on building the app. I deploy my app by using <code>next build &amp;&amp; next export &amp;&amp; firebase deploy</code> and use the <code>./out</code> folder for deployment source.</p>
  <p>You can find the code here: <a href="https://github.com/aichner/nextjs-redux-template/tree/add-basics-aa1" rel="noreferrer">https://github.com/aichner/nextjs-redux-template</a></p>