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.

Answer 2

You could switch to Dart Sass by taking advantage of package-aliasing. I guess this will not work under yarn.

First you remove the current node-sass pkg, then run:

npm install node-sass@npm:sass.

And you are fit to use the full features from sass with some remarks though.

• Check the behavioral diffs here.
• The performance measurement indicates that dart-sass is slower than node-sass.

It's all up to you and this turns to be a valid option here, if you really want to use these features provided by Sass.