SassCompilerHostedService doesn't work in Razor Class Library (RCL)

[nixxcz]

I'm developing a component library (using the Razor Class Library project template) that will be consumed from multiple Blazor projects. I was planning to use AspNetCore.SassCompiler to compile my SASS during dotnet watch when working on the UI components. However, because of this line, dart sass is being fed path to the running Blazor project that doesn't contain the components and SASS compilation doesn't work.

[sleeuwen]

Hi,
Is your blazor project a blazor server or blazor webassembly project?
For blazor server, you can modify the sasscompiler.json to include a source/target outside of the blazor server project, so that the sass watcher will watch the razor class library project and dotnet watch would take care of reloading the css I think.
If you're using blazor webassembly, the sass watcher is not supported in that scenario, and last I checked it wasn't possible to add custom actions for specific extensions as part of dotnet watch, so in that case you would have to run the sass watcher manually

[Yaro77]

@nixxcz I'm not sure if it's relevant, because my setup is not a Blazor project. I believe you should add hosted service not into RCL itself but to the main project. I've made this today and it works. dotnet watch --run successfully track changes in the RCL scss files. (.NET 9 at least)

[SigtryggurO]

I just started working again with Blazor and decided to add this package, but I'm running into exactly the same problems as you are. I ran into this problem more than three years ago and proposed an solution which you can see here #116 . The solution that was merged does partially fix this problem but only in the sense that you can add multiple files/folders to the watch but you have to navigate to the project relative to the startup project which leads to configs like this:

{
  "Source": "../BlazorComponentLibrary/Styles",
  "Target": "../BlazorComponentLibrary/wwwroot/css",
  "Arguments": "--style=compressed",
  "GenerateScopedCss": true,
  "ScopedCssFolders": [
    "../BlazorComponentLibrary/Components",
    "../BlazorComponentLibrary/Designs",
    "../BlazorComponentLibrary/Layout"
  ],
  "IncludePaths": [],
  "Compilations": [],
  "Configurations": {
    "Debug": {
      "Arguments": "--style=expanded"
    }
  }
}

This of course has to be duplicated for each project you add.

I would love to see a better solution to this problem, since I don't believe this boilerplate should be necessary.