Global SASS variables in VS2022 / .NET 8 Blazor app using DartSassBuilder nuget

Question

I need to make my sass variables global across all the other imported sass files in my project, rather than importing them in on a per sass file basis. I've stripped things back for simplicity, so I have a .NET 8 Blazor app in VS2022 and have a root sass file something like:

root.scss

@import "variables.scss";
@import "foobar.scss";

variables.scss

$primary: #767f81;

foobar.scss

//@import "variables.scss";

.something {
    color: $primary;
}

If I uncomment the variables @import inside foobar.scss it works/builds, otherwise I am seeing:

Does anyone know how to solve this and if indeed, if its possible or if its just an IDE thing with Visual Studio?

Thanks

Answer 1

I managed to achieve what I needed, and now some variables can be set at the root/global by using @forward & @use as follows:

root.scss

// use the default value
// @forward "variables"; 
// to override the value
@forward "variables" with ( $primary: #b6ff00 !default);
@import "foobar.scss";

variables.scss

$primary: #767f81 !default;

foobar.scss

@use "variables";

.something {
     color: variables.$primary;
}

note: VS2022 still shows a warning, but the app builds and DartSassBuilder generates the expected CSS