Sass watcher Suport for Blazor WASM

[luckyluggi]

Is your feature request related to a problem? Please describe. Sass watcher is currently only supported for Blazor Server

Describe the solution you'd like It would be Great if it would also be supported for Blazor WASM

Describe alternatives you've considered Currently i am running a sass watcher plugin in vscode. I have not found a solution to watch the sass files in Visual Studio for now. I could also watch the sass files in a terminal using comand line sass. But it would of course be great if it would just do that automatically in visual studio using this compiler too.

[aDisplayName]

Hi, @luckyluggi , the problem has been addressed in #51 , and you can use package version 1.50.0 or later.

[luckyluggi]

Ok thanks for the info. I've just tried it. It works with Visual studio, but when i run it with dotnet watch i always get the following error: "More than one scoped css files were found for the razor component" Do i need to configure something more?

i have this in the Program.js:

            #if DEBUG
                builder.Services.AddSassCompiler();
            #endif

and this in the sasscompiler.json

{
  "ScopedCssFolders": ["Layouts", "Pages", "Components"],
  "Arguments": "--style=compressed",
  "Configurations": {
    "Debug": {
      "Arguments": "--style=expanded"
    }
  }
}

[luckyluggi]

Here is an example project showing the problem: https://github.com/luckyluggi/blazor_wasm_sasscompiler_mvp

Repro steps:

• run the project via dotnet watch
• change the color in Pages\Index.razor.scss and save
• press Strg + R in the watching terminal

[mfgabriel92]

Hi,

I am not sure if I am understanding it correctly. I am using VS 2022 and I placed my SASS files within the Styles folder, but they are only compiled after a manual rebuild of the project. Is it supposed to be like this? I was expecting it to automatically compile into CSS upon saving the SASS files.

[sleeuwen]

As far as I know this isn't currently possible in Blazor Wasm projects.

In the ASP.NET Core version we spawn a process that watches the files. But because Blazor Wasm runs in the browser this isn't possible.

I've looked at dotnet-watch and can add the .scss extension as hot-reloadable, but it will only see it as static files and I didn't see a way to change that.

Using Ctrl+R in the dotnet-watch terminal window does work as that will trigger a new build, which in turn triggers the scss compiler msbuild task.

[simeyla]

It is actually possible to get the watcher (that starts for your server project) to work with the WASM client, with a little trick.

My server project folder is in a folder at the same level as the client project folder, so all I needed to do was add a relative path "..\\Client\\Pages" and now I can change a client scss file and the watcher catches it.

eg. S:\TFS\RR\Admin.Blazor\Client\Pages\Orders.razor.scss

The paths in ScopedCssFolders are relative to Directory.GetCurrentDirectory() (see SassCompilerHostedService.cs), which is how this can work.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
    "SassCompiler": {
      "SourceFolder": "Styles",
      "TargetFolder": "wwwroot\\css",
      "Arguments": "--style=compressed",
      "GenerateScopedCss": true,
      "ScopedCssFolders": [ "Views", "Pages", "Shared", "Components", "..\\Client\\Pages" ]
    }
}

I'm extremely new to Blazor but this seems pretty straightforward. Being able to do this is really valuable so I hope you can find a way to formalize this.

Obviously you can add more relative folders as needed.