SassError: Invalid CSS, wants expression instead of function

Question

I have 2 files, "styles.scss" and "_themes.scss" respectively:

@use "~bootstrap/scss/bootstrap.scss";
@use "themes";

body {
  background-color: themes.get(primary);
}

:root {
  --color-primary: #666666;
  --color-primary-variant: #999999;
  --color-on-primary: #000000;
}

@function get($color-name) {
  @return var(--color-#{$color-name});
}

The IDE (WebStorm 2021.1) shows no errors itself, however, upon attempting to compile it, I receive this message:

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 "...d-color: themes": expected expression (e.g. 1px, bold), was ".get(primary);"
        on line 16 of src/styles.scss

>>  background-color: themes.get(primary);

Just in case it was my file extensions, I made another version using .sass, only to be met with the same error. Is there an issue with how I apply @use "themes" where I cannot do themes.get(primary)? I tried using @import "themes" for get(primary) but it doesn't change anything.

Further information if applicable: I am using React along with React-Bootstrap and Bootstrap.