title: Serve a different SCSS file based on the text direction property
body: <p>I simply have two SCSS files. One called <code>app.scss</code> and the other <code>app-rtl.scss</code>.</p>
  
  <p>The differences between them is that one has SCSS files that handle right to left (import rtl files). What I'm trying to solve is that once the <code>dir</code> is rtl, then I wanna use the other file (<code>app-rtl.scss</code>).</p>
  
  <p>I'm using Node (mainly API) in the backend and React in the frontend.</p>
  
  <p>I would very much appreciate it if someone has a suggestion on what I could do.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Just to clarify a few things. I've used create-react-app package then ejected to add SCSS. This is how I'm currently getting the stylesheet (one style sheet)</p>
  
  <p><code>index.js</code></p>
  
  <pre><code>import '../scss/app.scss'; // this where I'm getting all the styles.
  </code></pre>
  
  <p>And here is what that file looks like.</p>
  
  <p><code>app.scss</code></p>
  
  <pre><code>// Override default value for $dir in directional
  $dir: ltr;
  
  // Import helpers from directional
  @import "base/directional";
  
  @import "base/variables";
  
  // Import helpers from bootestrap
  @import "bootstrap/functions";
  @import "bootstrap/variables";
  @import "bootstrap/mixins";
  @import "bootstrap/root";
  @import "bootstrap/reboot";
  @import "bootstrap/type";
  @import "bootstrap/images";
  //@import "bootstrap/code";
  @import "bootstrap/grid";
  //@import "bootstrap/tables";
  @import "bootstrap/forms";
  //@import "bootstrap/buttons";
  @import "bootstrap/transitions";
  @import "bootstrap/dropdown";
  @import "bootstrap/button-group";
  @import "bootstrap/input-group";
  @import "bootstrap/custom-forms";
  @import "bootstrap/nav";
  @import "bootstrap/navbar";
  @import "bootstrap/card";
  .
  .
  .
  </code></pre>
  
  <p>The <code>app-rtl.scss</code> has a bunch of scss files for right to left.</p>
  
  <p>If I wanna use Webpack, how do I compile it to two CSS files then apply what was suggested for me in the answer? If handling this from Node, I'm also file with that approach. </p>
  
  <p>P.S: I'm not that familiar with Webpack but I think this is how to does the job:</p>
  
  <pre><code>          {
              test: /\.scss$/,
              loaders: [
                require.resolve('style-loader'),
                require.resolve('css-loader'),
                require.resolve('fast-sass-loader')
              ]
            },
            {
              test: /\.css$/,
              loaders: [
                require.resolve('style-loader'),
                require.resolve('css-loader'),
              ]
            },
  </code></pre>