title: order of imports styles changes (scss and bootstrap) in lazy loading imports
body: <p>I'm trying to add a second theme to project by lazy loading styles files based on a condition in ThemeSelector.js, and in consequence the order of styles changes, always the bootstrap imported last and i cant override it in scss/css files without the !important, how can I force it to respect the order of imports? </p>
  
  <p>ThemeSelector.js: </p>
  
  <pre><code>import React, { Suspense, Fragment, lazy } from 'react'
  
  const Theme1 = lazy(() =&gt; import('./themes/Theme1'))
  const Theme2 = lazy(() =&gt; import('./themes/Theme2'))
  const condition = ...
  
  const ThemeSelector = ({ children }) =&gt; {
     return (
      &lt;Fragment&gt;
        {/* Conditionally render theme based on condition */}
        &lt;Suspense fallback={null}&gt;
          {!condition &amp;&amp; &lt;Theme1 /&gt;}
          {condition &amp;&amp; &lt;Theme2 /&gt;}
        &lt;/Suspense&gt;
        {children}
      &lt;/Fragment&gt;
    )
  }
  
  export default ThemeSelector
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import...
  import...
  import ThemeSelector from 'styles/ThemeSelector'
  import App from './App'
  
  ...
  ...
  ReactDOM.render(
      &lt;ThemeSelector&gt;
        &lt;App /&gt;
      &lt;/ThemeSelector&gt;,
    document.getElementById('root'),
  )
  </code></pre>
  
  <p>Theme1.js</p>
  
  <pre><code>import '../../theme1.css'
  const Theme1 = () =&gt; null
  export default Theme1
  </code></pre>
  
  <p>Theme2.js</p>
  
  <pre><code>import '../../theme2.css'
  const Theme2 = () =&gt; null
  export default Theme2
  </code></pre>