Trying to use sass modules in create-react-app with the new @use syntax but receiving an error

Question

I've npm installed the latest node-sass, and scss files work fine until I use @use. I have a _tokens.scss file in /shared/tokens/ folder. Within _tokens.scss I have:

$colorwhite: #ffffff;

In my root folder, my App.scss looks like this:

@use "shared/tokens/tokens";

.App-header {
  color: tokens.$colorwhite;
}

But I am getting this error:

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
SassError: Invalid CSS after "  color: tokens": expected expression (e.g. 1px, bold), was ".$colorwhite;"
        on line 26 of /Users/xxx/src/App.scss
>>   color: tokens.$colorwhite;

Any ideas?

Edit: it works fine with @import. I've also tried @use... as * but no-go.

Answer 1

The @use rule is currently only supported by Dart Sass. You should use @import instead.