CODEWITHSUNDEEP
reactjssass
Arnold Gee
Arnold Gee

Reputation: 906

Unable to import sass variables from one scss file to another

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?

Upvotes: 1

Views: 763

Answers (1)

Simplicius
Simplicius

Reputation: 2105

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.

Upvotes: 1

Related Questions