SCSS: Undeclared variable using @use

74 views Asked by At

I want to provide variables for my stylesheets in my Blazor Server and MAUI Blazor applications and since I read that @import is to be removed from SCSS in the future, I want to do it the right way using @use.

However I cannot use my defined variables using @use. @import works just like it is supposed to, so I am sure the path is correct. With @use Visual Studio underlines the variables and expresses the warning 'Undeclared variable' and Dart-Sass throws errors when attempting to compile my SCSS files. Interestingly enough VS Code does not mark the variables as undeclared... The little compile configuration is also correct as far as I am aware, at least it worked fine before using variables.

@use "../Themes/variables.scss" as v;

.button {
    border-radius: v.$radius;
    transition-duration: v.$transition;
    padding: v.$padding;
    outline: v.$nooutline;
    ...
}

Have I forgotten any kind of required configuration or is this incompatible with Blazor for some weird reason? I have not found anything about variables working in the way I am experiencing.

0

There are 0 answers