node-sass invalid CSS

Question

Does node-sass even support @use ? Since I'm getting this error:

SassError: Invalid CSS after "...t-family: fonts": expected expression (e.g. 1px, bold), was ".$roboto;"

Here's the code of Nav.scss:

 .nav { width: 100%; font-family: fonts.$roboto; &__item { margin-bottom: 10px; font-size: variables.$a; &_active { color: rgb(37, 133, 34); } } &__item:last-child { margin-bottom: 0px; } }

Here's the code of fonts.scss:

$roboto: 'Roboto';

completely wrong syntax. sass-lang.com/documentation/variables — cloned
– cloned, Commented Mar 22, 2021 at 14:56
@use is only supported by dart-sass - if you are using lib-sass or ruby-sass, that may be why you're getting that error. I believe node-sass uses lib. Here's a github issue: github.com/sass/node-sass/issues/2886 — disinfor
– disinfor, Commented Mar 22, 2021 at 15:25
@cloned it's under Built-in modules. sass-lang.com/documentation/variables#built-in-variables — disinfor
– disinfor, Commented Mar 22, 2021 at 15:26
@disinfor: If you or Programmer_007 manage to confirm your hypothesis, your comment should be good as an answer. — BoltClock
– BoltClock, Commented Mar 22, 2021 at 15:35

Nathelol · Accepted Answer · 2021-03-26 11:03:33Z

The syntax is incorrect for node-sass.

You have defined the font variable correctly in fonts.scss but you need to import the font file into your Nav.scss file if you haven't already with:

@import "PATH/fonts.scss";

You then just need to reference the variable like so:

font-family: $roboto;

Collectives™ on Stack Overflow

node-sass invalid CSS

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related