title: How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?
body: <p>I'm using GatsbyJS and TypeScript along with the gatsby-plugin-sass plugin.
  I'm trying to import individual styling for components like the following example - import './Card.scss'.</p>
  
  <pre><code>import React from 'react';
  import Colors from '../../constants/Colors';
  import './Card.scss'
  
  interface CardProps {
    children: any,
    padding?: number,
    marginBottom?: number,
    borderRadius?: number,
    hover?: boolean,
    border?: boolean
  }
  
  const Card: React.FunctionComponent&lt;CardProps&gt; = ({ children, padding, marginBottom, borderRadius, hover, border }) =&gt; {
  
    const cardStyling = {
      backgroundColor: Colors.white,
      padding: padding,
      marginBottom: marginBottom,
      borderRadius: borderRadius,
      border: (border ? '1px solid #E8EAED' : '0'),
    } as React.CSSProperties;
  
    return(
        &lt;div style={cardStyling} className={hover ? 'card-shadow card-hover card-padding' : 'card-shadow card-padding'}&gt;
            {children}
        &lt;/div&gt;
    );
  }
  
  Card.defaultProps = {
    padding: 40,
    marginBottom: 20,
    borderRadius: 15,
    hover: true,
    border: true
  } as Partial&lt;CardProps&gt;;
  
  export default Card;
  </code></pre>
  
  <p>However, I'm receiving the following message when I use <code>gatsby build</code>.</p>
  
  <pre><code>warn chunk styles [mini-css-extract-plugin]
  Conflicting order. Following module has been added:
   * css ./node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/bootstrap/dist/css/bootstrap.css
  despite it was not able to fulfill desired ordering with these modules:
   * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
  eOf-1-3!./src/components/cards/style.scss
     - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-handelsbetingelser-tsx,
  component---src-pages-kontakt-tsx, component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx
     - while fulfilling desired order of chunk group(s) component---src-pages-baggrund-tsx, component---src-pages-betaling-tsx,
  component---src-pages-din-rapport-tsx, component---src-pages-foer-du-starter-tsx, component---src-pages-hent-rapport-tsx,
  component---src-pages-hvorfor-klagen-tsx, component---src-pages-newcase-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx,
   component---src-pages-vurdering-tsx
   * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
  eOf-1-3!./src/components/layout/MoveupContainer.scss
     - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-blog-tsx,
  component---src-pages-case-rosario-tsx, component---src-pages-handelsbetingelser-tsx, component---src-pages-kontakt-tsx,
  component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx
     - while fulfilling desired order of chunk group(s) component---src-templates-tag-tag-template-tsx,
  component---src-templates-category-category-template-tsx, component---src-pages-hvorfor-klagen-tsx
   * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
  eOf-1-3!./src/components/blog/BlogCard.scss
  </code></pre>
  
  <p>My main imports are done in the layout file like so:</p>
  
  <pre><code>import React from 'react'
  import 'bootstrap/dist/css/bootstrap.css';
  import "slick-carousel/slick/slick.css";
  import "slick-carousel/slick/slick-theme.css";
  import 'scss/theme.scss'
  import 'scss/typography.scss'
  import 'scss/animations.scss'
  import 'scss/forms.scss'
  import CallToAction from '../calltoaction/CallToAction'
  import Footer from '../footer/Footer';
  import ReactstrapNavbar from '../navigation/ReactstrapNavbar';
  
  interface ComponentProps {
    children: any,
    location: string,
    simpleNavigation?: boolean,
    showCallToAction?: boolean
  }
  
  const Layout: React.FunctionComponent&lt;ComponentProps&gt; = ({ children, location, simpleNavigation, showCallToAction }) =&gt; {
      return (
          &lt;div&gt;
              &lt;ReactstrapNavbar location={location} simpleNavigation={simpleNavigation} /&gt;
              {children}
              {showCallToAction &amp;&amp; (
                &lt;CallToAction /&gt;
              )}
              &lt;Footer /&gt;
          &lt;/div&gt;
      )
  }
  
  Layout.defaultProps = {
      simpleNavigation: false,
      showCallToAction: true
  } as Partial&lt;ComponentProps&gt;;
  
  export default Layout;
  </code></pre>
  
  <p>I have only found information on how to suppress the warning.
  I want to solve the problem. I have seen plenty of Gatsby templates using the same approach without the warnings.</p>
  
  <p>Do you know how to solve it?</p>