Search code examples
sassnode-sass

Why is node-sass throwing "Invalid CSS after \" @include corners\": expected \"}\", was \".rounded;\""

Per the example provided here I created a project with the following files...

// _corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}

// style.scss
@use "./corners";
.button {
  @include corners.rounded;
}

but when I run this with node-sass like...

./node_modules/.bin/node-sass src/components/test/style.scss dist/output.css --include-path node_modules

I get...

{
  "status": 1,
  "file": "/.../web/ui/src/components/test/style.scss",
  "line": 4,
  "column": 12,
  "message": "Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"",
  "formatted": "Error: Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"\n        on line 4 of src/components/test/style.scss\n>>   @include corners.rounded;\n\n   -----------^\n"
}

What am I missing? I tried sass version too but neither are working

Solution

  • Node-sass, which is libsas based, doesn't currently support the @use syntax, only dart-sass does https://sass-lang.com/documentation/at-rules/use