title: Sass and react, importing variables with @use to modules
body: <p>Heya so I realised the Sass team discourages use of @import (<a href="https://sass-lang.com/documentation/at-rules/import" rel="nofollow noreferrer">https://sass-lang.com/documentation/at-rules/import</a>) so I've tried to use @use.</p>
  <p>I'm very new to using Sass in React (discouraged from using Styled-components which I'm more familiar with). When trying to import a variable to my InputBar.module.scss I get this error:</p>
  <pre><code>Failed to compile
  ./src/stylesheets/modules/InputBar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./src/stylesheets/modules/InputBar.module.scss)
  SassError: Invalid CSS after &quot;...nt-family: vars&quot;: expected expression (e.g. 1px, bold), was &quot;.$contentfont;&quot;
          on line 7 of /Users/Jamming/_projekt/_kod/timeatask/client/src/stylesheets/modules/InputBar.module.scss
  &gt;&gt;   font-family: vars.$contentfont;
  
     -------------------^
  </code></pre>
  <p>So yeah, not sure what to do, I've tried everything. Pretty sure I've set up everything wrong or my way of working with Scss + React is completely off. Have a look at my code:</p>
  <p>stylesheets/modules/_vars.scss</p>
  <pre><code>$primaryBG: #f0f7ff;
  
  $h1font: 'Montserrat Subrayada';
  $contentfont: Montserrat, sans-serif;
  </code></pre>
  <p>stylesheets/modules/InputBar.module.scss</p>
  <pre><code>@use 'vars';
  
  .container {
    [...]
    font-family: vars.$contentfont;
  }
  
  </code></pre>
  <p>Components/InputBar.js</p>
  <pre><code>import styles from '../stylesheets/modules/InputBar.module.scss'
  [...]
  &lt;form className={styles.container}
  </code></pre>
  <p>which works fine when I remove this from InputBar.module.scss</p>
  <blockquote>
  <p>font-family: vars.$contentfont;</p>
  </blockquote>
  <p>I also have a stylesheets/main.scss which</p>
  <blockquote>
  <p>@import './modules/vars.scss';</p>
  </blockquote>
  <p>So. where am I completely lost? please enlighten me :-)</p>
  <p>edit: project is bootstrapped with create-react-app
  edit: + node-sass</p>