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