Scss (live scss compiler) throws an error when using the imported variables from another scss file (@use)

user_15351296 0
Viewed 813

this is a strange error that I don't understand at all. I usually search and seek the answer before posting it on StackOverflow. So the problem is that I would like to use the variables that I imported from another scss file called _variables.com using @use. This is written in scss-lang.com@use. The way I try to use my variable:

_variables.scss
$secondary-color: #CEA44A;

style.scss
@use '../../variables';

.foo {
  background-color: variables.$secondary-color;
}

// ERROR TEXT
Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$secondary-color;"
on line 19 of sass/c:\Users\Amirreza Amini\Desktop\blog\src\Components\Register\Register.scss
background-color: variables.$secondary-color;
sass
2 Answers

Use Live Sass Compiler by Glenn Marks


I had exactly the same problem. You read about @use on SASS official website, follow the instructions, write the code in Visual Studio Code and then you get this strange Compilation Error when saving the SASS or SCSS file. You double check everything and it seems like it should work but it doesn't.

Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.

Don't use this extension: Live Sass Compiler by Ritwick Dey

You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing as you can see below.

Wrong extension

Use this extension: Live Sass Compiler by Glenn Marks

You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it. This extension compiles your SASS or SCSS files to CSS files successfully as you can see below.

Right extension

user_103471450

change @use '../../variables'; to @use '../../variables' as *;

user_117333830
Related