title: SassError: Invalid CSS, wants expression instead of function
body: <p>I have 2 files, &quot;styles.scss&quot; and &quot;_themes.scss&quot; respectively:</p>
  <pre><code>@use &quot;~bootstrap/scss/bootstrap.scss&quot;;
  @use &quot;themes&quot;;
  
  body {
    background-color: themes.get(primary);
  }
  </code></pre>
  <pre><code>:root {
    --color-primary: #666666;
    --color-primary-variant: #999999;
    --color-on-primary: #000000;
  }
  
  @function get($color-name) {
    @return var(--color-#{$color-name});
  }
  </code></pre>
  <p>The IDE (WebStorm 2021.1) shows no errors itself, however, upon attempting to compile it, I receive this message:</p>
  <pre><code>Failed to compile.
  
  ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss- 
  loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src
  /styles.scss)
  
  SassError: Invalid CSS after &quot;...d-color: themes&quot;: expected expression (e.g. 1px, bold), was &quot;.get(primary);&quot;
          on line 16 of src/styles.scss
  
  &gt;&gt;  background-color: themes.get(primary);
  </code></pre>
  <p>Just in case it was my file extensions, I made another version using <code>.sass</code>, only to be met with the same error. Is there an issue with how I apply <code>@use &quot;themes&quot;</code> where I cannot do <code>themes.get(primary)</code>? I tried using <code>@import &quot;themes&quot;</code> for <code>get(primary)</code> but it doesn't change anything.</p>
  <p>Further information if applicable: I am using React along with React-Bootstrap and Bootstrap.</p>