title: React load only one scss based on variable
body: <p>UPDATE: I figured out what was happening and there was no way for anyone to answer because a lot of missing information - like where were the light and dark variable files being exported to. Answer, everywhere... they were exporting everywhere so naturally both files were being included in the frontend.</p>
  <p>Expanding on my <a href="https://stackoverflow.com/questions/73548556/is-it-possible-to-load-stylesheets-for-react-component-by-extension-when-env-is">previous question</a> as I've tried a different approach from what I was able to find online.</p>
  <p>Instead of trying to load certain stylesheets based on an application variable and the extension of the stylesheets, I've defined two css variables files and only want one to load for the frontend application.</p>
  <pre><code>import React, {lazy, Suspense} from &quot;react&quot;;
  import ApplicationVariable from &quot;./appVars&quot;;
  import LoadingComponent from &quot;../loadingComponent&quot;; // our fallback
  
  // I made 2 components that import the light/dark-variables.scss files;    
  const LightThemeVariables = lazy(() =&gt; import(&quot;./light-variables&quot;));
  const DarkThemeVariables = lazy(() =&gt; import(&quot;./dark-variables&quot;));
  
  export const ThemeSelector = ({ children }) =&gt; {
      return (
          &lt;&gt;
              &lt;Suspense fallback={&lt;LoadingComponent loading={true} /&gt;}&gt;
                  {ApplicationVariable.isLight() ? &lt;LightThemeVariables /&gt; : &lt;DarkThemeVariables  /&gt;}
              &lt;/Suspense&gt;
              {children}
          &lt;/&gt;
      );
  };
  
  // Then in the frontend application I wrapped my app in the ThemeSelector
  ReactDOM.render(
          &lt;ThemeSelector&gt;
              &lt;App /&gt;
          &lt;/ThemeSelector&gt;,
      document.getElementById('root')
  );
  </code></pre>
  <p>From what I read doing the above will allow my application time to figure out which variables file it needs then load the app once a &quot;decision&quot; is made with the loading component available to the user as feedback that something is happen.</p>
  <p>It works, I can see the loader but, I'm getting both variable files still.</p>
  <p>Could it be because I have the variable in the <code>src</code> directory? I moved them higher and both are still loaded. I've cleared the cache, deleted the builds to get it as clean as possible without success.</p>
  <p>I'm stumped. Guidance would be much appreciated!</p>