1

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';

Here's the file structure

Heil Programmierung
  • 121
  • 1
  • 9
  • completely wrong syntax. https://sass-lang.com/documentation/variables – cloned Mar 22 '21 at 14:56
  • 1
    where? It's completely right – Heil Programmierung Mar 22 '21 at 15:07
  • Where do you see your syntax anywhere on the page I linked? – cloned Mar 22 '21 at 15:20
  • 1
    `@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: https://github.com/sass/node-sass/issues/2886 – disinfor Mar 22 '21 at 15:25
  • 1
    @cloned it's under Built-in modules. https://sass-lang.com/documentation/variables#built-in-variables – disinfor Mar 22 '21 at 15:26
  • 1
    @disinfor: If you or Programmer_007 manage to confirm your hypothesis, your comment should be good as an answer. – BoltClock Mar 22 '21 at 15:35
  • haha oh you are right, never used it like this with variables tough, sorry for the confusion. I was on the completley wrong path and confidently incorrect, sorry! – cloned Mar 22 '21 at 15:53
  • @BoltClock right on! I will wait until Programmer_007 can confirm before adding as an answer. – disinfor Mar 22 '21 at 15:57
  • As of your picture I suppose you are using VS Code. In that case you may like to use an extension running most acutal Sass Version 'Dart Sass' so you can use `@use`. Information about that: https://stackoverflow.com/a/66207572/9268485 – Brebber Mar 23 '21 at 15:57

1 Answers1

1

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;
Nathelol
  • 577
  • 7
  • 25