How to deploy reusable .scss files using nuget in .NET Blazor project instead of npm while can be referenced within project folder?

[aDisplayName]

In Angular Project, the reusable SCSS is being deployed via node modules using npm. But for C# Blazor project, we would like to see the similar solution by using nuget.

In our case, we have created a common-color.scss file to provide a common color code definitions.

Project: SharedColor.csproj / Styles / common-color.scss

// COMMON COLORS
$_color-black: #000;
$_color-white: #fff;

What we would like to achieve, is to package this common-color.scss into the SharedColor.nupkg as source code, and allow the project importing this nuget package to be able to reuse the file with their own .scss files:

Project: BlazorApp1.csproj / Page / index.razor.scss

@import "../Styles/common-colors.scss";

.info {
    color: $_color-black;
}

We are using AspNetCore.SassCompiler to convert index.razor.scss into index.razor.css during the build.

When building project, as shown below, An error was thrown because the build task Compile Sass from AspNetCore.SassCompiler could not find file /Styles/common-colors.scss under the project folder BlazorApp1 at the time the task was performed, as we can see the file is actually located under %USERPROFILE%\.nuget\packages\sharedcolor\1.0.0\contentFiles\any\net8.0\Styles\common-colors.scss

My question is

1. What are those icons called in solution explorer mean?
   
   Is there a term/name for those items "virtually showed up" from nuget package into the host project's 'virtual folder'?
2. Is there such a task stage during the build, that all those assets from nuget packages are combined/overlayed with the files located in the project folder, so that the source code files from the nuget package, can be directly referenced in SCSS / SASS 's import or use statement? It would be useful to compile front-end artifacts without rely on NPM.

Regards

The code example can be found at here

[Freysi21]

@jeffkl I've been trying to solve this on off for about two years now with no prevail. Is it possible to get your insights on this ?

[Freysi21]

@aDisplayName have you set up a gulpfile to compile the scss files to css ?

[aDisplayName]

I'm using AspNetCore.SassCompiler nugget package to compile scss to css

[Freysi21]

okok have you checked out this https://github.com/koenvzeijl/AspNetCore.SassCompiler/blob/master/Samples/AspNetCore.SassCompiler.Sample/sasscompiler.json
Seems like there is a special section in the sasscompiler.json to reference a Style folder. They also specifically mention BlazorWasm apps not working with appsettings.json but sasscompiler.json but it seams like its for the watcher.

The rcl it self has a sasscompiler.json as well. But it seems like your solution has gotten over the hurdle of getting the css assets to the consumer project. Its just a matter of setting up a sasscompiler.json in the consumer project the correct way I think.
https://github.com/koenvzeijl/AspNetCore.SassCompiler/blob/master/Samples/AspNetCore.SassCompiler.RazorClassLibrary/sasscompiler.json

[Freysi21]

I also just noticed you have a sample project. I took a look and saw you have no sasscompiler.json in your createpackageonbuild project
Below is the mudblazor lib and is a rcl lib. It includes sasscompiler within the root of the nuget package project.

https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor/sasscompiler.json