@use not working in Sass to import variables but @import is working

Question

I have a sass variable declared in the file _variables.scss. When I import that file using @use, I get an error when compiling stating "Error: undefined variable". If however, I use @import instead, everything compiles just fine.

Here's the first file which is imported

//_variables.scss
$primaryColor: rgba(199, 26, 113, 0.747);

And here's the file which is doing the importing.

//styles.scss
@use 'variables';

header {
background: $primaryColor;
}

When compiling this returns "Error: undefined variable". But if I change @use to @import, it works just fine.

Why does @import work but @use does not?

Nonmetallic

Does this answer your question? Sass: @use makes error, undefined variable – Complaint

Answer 1

Variables imported with @use have a namespace. Therefore, you need to prefix your variable name with the namespace (i.e. instead of $primaryColor, write variables.$primaryColor):

@use 'variables';
// @use './variables' // creates the same namespace

header {
  background: variables.$primaryColor;
}

You can also rename the namespace:

@use 'variables' as 'renamedVariables';

header {
  background: renamedVariables.$primaryColor;
}

If you don't want to use the namespace, you can load variables without it:

@use 'variables' as *;

header {
  background: $primaryColor;
}

But imo namespaces make your stylesheet neater (e.g. it's clear where each variable comes from, and you won't accidentally overwrite one variable with another), so i'd stick with them...

Another Stack Overflow answer pointed me in the right direction

Complaint

@use 'variables' as *; saved by bacon thank you so much. I was trying to import some variables in bulma before using @ use and it was not working. Thanks. – Hydrazine

Answer 2

using the underscore _ in sass simply means you are declaring a partial When Sass sees these files, it will not process them into CSS files.

By default a partial requires that it should be imported into another file that will inevitability be processed into CSS in order for it to be output. rather than use the @use

Catholicity

I'm not sure if this is the case because the example on the Sass website uses "use" and has an underscore on the file being used without using import. sass-lang.com/guide Also, "use" will work on files with underscores - I've tried importing styles (i.e. not variables) using "use" and an underscored file and it worked just fine. – Nonmetallic

Answer 3

Try this. I have a directory in my SASS folder that is named "abstracts". Inside that folder I make an index.scss file. Inside that index file I have the following

@forward "config";
@forward "variables";
@forward "named-colors";
@forward "hsl";
@forward "maps";
@forward "mixins";
@forward "reasonable-colors";

Each of those files is a partial "_variables" In the rest of my Sass files that I want to use all those variables and mixins in, I put this at the top

@use '../abstracts' as *

That way all the variables are there to use. Of course your folder structure may be different. After the abstract folders I have folders for Basic files, Layout, modules,pages and themes. Each file in each of those folders uses @use '../abstracts' as *

Preexist