为.NET 6 Blazor应用添加SASS支持的正确方法是什么？

• 第一步：卸载原有Delegate.SassBuilder NuGet包，安装DartSass.MSBuild NuGet包，该包为Dart Sass官方的MSBuild编译封装，兼容性和性能更优。
• 第二步：打开项目的.csproj文件，在原有配置基础上新增如下配置段：

<ItemGroup>
  <!-- 识别所有.razor.scss文件为SCSS源，输出对应同名.razor.css文件 -->
  <SassScss Input="**/*.razor.scss" OutputPath="%(RelativeDir)%(Filename).css" />
  <!-- 配置.razor.scss嵌套在对应.razor文件下显示 -->
  <None Update="**/*.razor.scss">
    <DependentUpon>%(Filename)</DependentUpon>
  </None>
  <!-- 配置生成的.razor.css默认隐藏，嵌套在对应.scss文件下 -->
  <None Update="**/*.razor.css">
    <Visible>False</Visible>
    <DependentUpon>%(Filename).scss</DependentUpon>
  </None>
</ItemGroup>

<!-- 配置项目构建前自动编译所有修改过的SCSS文件 -->
<Target Name="CompileScssBeforeBuild" BeforeTargets="BeforeBuild">
  <CompileSass Scss="@(SassScss)" OutputStyle="Compressed" />
</Target>

• 第三步：重启Visual Studio即可生效，所有配置效果如下：
  • 无需手动编译SCSS，项目启动、构建时会自动执行编译
  • .razor.scss会自动嵌套在对应.razor文件下显示，符合期望的文件结构
  • 编译生成的.razor.css默认在解决方案资源管理器中隐藏，无需关注其内容
  • 完全兼容Blazor原生CSS隔离机制，无需修改index.html中的{项目名}.styles.css引用逻辑

内容的提问来源于stack exchange，提问作者MortenMoulder