1

In my React app, I have a file called _variables.scss with the following code. It contains variables that I want to use in all my .scss files:

$navy: #264653;
$green: #2A9D8F;
$yellow: #E9C46A;
$orange: #F4A261;
$red: #E76F51;

$title-font: "Arial Rounded MT Bold", sans-serif;
$text-font: "Raleway", sans-serif;

I want to use the variables in another .scss file. This is my code in the other file:

@use './design/variables' as v;

* {
  font-family: v.$text-font;
}

However, instead of recognizing the variable, my React app returns the following error: enter image description here

I have already checked that the path of the file is the correct one.

How can I fix this error?

Arnold Gee
  • 856
  • 2
  • 8
  • 18
  • 2
    Not sure about `@use`. Try `@import './design/variables'`. Also just `$text-font` but not `v.$text-font`. – Mr_Green Sep 06 '20 at 17:00
  • Yes, it worked! – Arnold Gee Sep 06 '20 at 17:20
  • 1
    However, I have read here https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files/61500282#61500282 that `@import` is deprecated and that we should use `@use`. How would you solve the error using `@use` ? And why is `@import` going to be deprecated? – Arnold Gee Sep 06 '20 at 17:22
  • Not sure. If you are using `@use` try using `#{v.$text-font}` – Mr_Green Sep 06 '20 at 17:27
  • It does not work this way ```` SassError: Invalid CSS after " font-family: #{v": expected expression (e.g. 1px, bold), was ".$text-font};" on line 4 of /Users/arnau/Desktop/PROJECTES/diverteach/src/App.scss >> font-family: #{v.$text-font}; ------------------^ ```` – Arnold Gee Sep 06 '20 at 20:00

1 Answers1

1

I am assuming you are using Node-Sass as most are. @use is only supported by Dart-Sass yet and probably forever. The announcement that @import would be depricated was made 5 years ago.

Simplicius
  • 2,009
  • 1
  • 5
  • 19
  • Should I use dart-sass instead of node-sass, then? Or should I not bother and keep using node-sass? – Arnold Gee Sep 07 '20 at 08:40
  • 1
    @ArnoldGee, There's absolutely nothing wrong about using Node-Sass, Dart-Sass is the primary implementation and gets every new feature first, meaning its also not the most stable. And as said the announcement to depricate `@import` was made 5 years ago. – Simplicius Sep 07 '20 at 13:42