AspNetCore.SassCompiler: Does not compile variables

Question

I'm trying to get a blazor web app (server side rendering, windows, .net8.0) to use an scss file for some variables, which I later want to import into .css files.

The MS docu mentioned AspNetCore.SassCompiler, which I'm trying to use (version is 1.77.8).

So, I've got a GlobalStyles/StyleSheet.scss with one line:

$xxx-color:#aaaaaa;

and an appsettings file looking like this:

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft.AspNetCore": "Warning"
        }
    },
    "AllowedHosts": "*",
    "SassCompiler": {
        "Source": "GlobalStyles",
        "Target": "wwwroot/css",
        "Arguments": "--style=compressed --verbose",
        "GenerateScopedCss": true,
        "ScopedCssFolders": [ "Views", "Pages", "Shared", "Components" ]
    }
}

Now, what I get is a StyleSheet.css in the right place, but the only content is this:

/*# sourceMappingURL=StyleSheet.css.map */

And no error or other messages in the build output window in Visual Studio. What I had expected was something like

--xxx-color: #aaaaaa;

for importing into other css files.

Is there anything I'm doing wrong here?

Answer 1

Maybe we made a mistake for using SCSS? Here's my test for reproducing your issue.

Then if my definition looks like this, it worked

My test result.

@page "/counter/{Color?}"
@rendermode InteractiveServer

<div class="@BackgroundStyle">
    this is the content
</div>

@code {
    [Parameter]
    public string Color { get; set; } = BackgroundColor.LightGrey.ToString();
    public enum BackgroundColor { LightGrey, MediumGrey, DarkGrey }
    private string BackgroundStyle => $"BackColor-{Color}";
}

$BackColor-LightGrey: #d4d3d2;
$BackColor-MediumGrey: #8f9194;
$BackColor-DarkGrey: #585959;

.BackColor {
    &-LightGrey {
        background-color: $BackColor-LightGrey;
    }

    &-MediumGrey {
        background-color: $BackColor-MediumGrey;
    }

    &-DarkGrey {
        background-color: $BackColor-DarkGrey;
    }
}

Here's my configuration in appsettings.json. My scss file is placed in Pages folder like you can see in screenshot Counter.razor.scss, so that I have "Source": "Pages",.

"SassCompiler": {
   "Source": "Pages",
   "Target": "wwwroot/css",
   "Arguments": "--style=compressed --verbose",
   "GenerateScopedCss": true,
   "ScopedCssFolders": [ "Views", "Pages", "Shared", "Components" ]
 }