CODEWITHSUNDEEP
sass
herman
herman

Reputation: 83

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

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.

Upvotes: 8

Views: 2808

Answers (2)

Arkellys
Arkellys

Reputation: 7790

Update:

Since Node Sass is now deprecated, you can migrate to Dart Sass by replacing node-sass with sass in your package.json and so you will be able to use the @use and @forward rules.

You can use the migration tool to help you with the update.

Original answer:

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

Upvotes: 9

Arp
Arp

Reputation: 1088

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.

Upvotes: 3

Related Questions