title: Load SCSS file dynamically on button click
body: <p><a href="https://i.stack.imgur.com/aPJs3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aPJs3.png" alt="different CSS files"></a></p>
  
  <p>as you can see I have a scss file loaded for the entire project and I'd like to know if it is possible to change what scss file is loaded on the click of the button. keep  in mind this scss file applies on the root component but I'm going to place the button on a component that's it's grand-child.</p>
  
  <p>I've tried a couple things along things but the problem is apparently there's no way to attribute a scss file other than by an import ( This is in /Components/App.jsx ) : </p>
  
  <pre><code>import '../scss/app.scss';
  //import '../scss/darcula.scss'; for dark theme.
  </code></pre>
  
  <p>and if I uncomment the above the imported scss is darcula but I have no way to dynamically change the import set that I know of.</p>
  
  <p>an acceptable solution would be a triggered seperate import that happens within the child which does not entirely replace the other file but instead only supersedes each redefined style allowing me to only change the collors to obtain this "night mode" button that I want. </p>
  
  <p>I don't understand why requires can't be isolated inside ifs
  Even if I do this :</p>
  
  <pre><code>turnLightsOnOff() {
      if (this.state.theme) {
          require('../../../scss/app.scss');
          this.setState({
              theme: false,
          });
      } else {
          //require('../../../scss/darcula.scss');
          this.setState({
              theme: true,
          });
      }
  }
  </code></pre>
  
  <p>app.css is loaded even thought the condition for that if is not yet met</p>
  
  <p>and if I uncomment the other line both scss are loaded one one top of another.</p>