title: React & SCSS: SassError: Undefined variable
body: <p>I am developing a React application and I have SCSS file where I have defined some variables:</p>
  <p><strong>variables.scss</strong>:</p>
  <pre class="lang-css prettyprint-override"><code>$source-sans-font: Source Sans Pro, serif;
  $sidebar-bg-color: #916fdd;
  $sidebar-width: 250px;
  $icon-bg-color: transparent;
  $icon-size: 24px;
  $highlight-color: #ffffff;
  $breakpoint-lg: 1100px;
  </code></pre>
  <p>In my React component I have an other SCSS file which uses this variables:</p>
  <pre class="lang-css prettyprint-override"><code>@use &quot;../../assets/scss/variables&quot;;
      
  .headerText {
    font-family: $source-sans-font;
    font-weight: 600;
    font-size: 28px;
    color: #2d2d2d;
    opacity: 1;
    padding-top: 9px;
  }
  </code></pre>
  <p>When I try to run the application I am getting this error:</p>
  <p>Failed to compile.</p>
  <pre><code>./src/components/PortfolioSummary/PortfolioSummary.module.scss
  (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/PortfolioSummary/PortfolioSummary.module.scss)
  SassError: Undefined variable: &quot;$source-sans-font&quot;.
           on line 4 of /Users/olcayertas/10n/src/components/PortfolioSummary/PortfolioSummary.module.scss
  &gt;&gt;   font-family: $source-sans-font;
   
  ------------------^
  </code></pre>
  <p>I am using WebStorm and IDE doesn't give any error for the variables and if I pressed command + click on variables it can go to the definitions.</p>
  <blockquote>
  <p>Environment:<br />
  Node: v14.17.0<br />
  NPM: 6.14.13<br />
  OS: Mac OS X Big Sur</p>
  </blockquote>