.NET 6.0环境下Blazor WASM项目.scss文件热重载不生效问题咨询

.scss文件的Blazor WASM热重载完全可以实现，你遇到的问题是LibSassBuilder默认只会在全量构建时编译.scss文件，dotnet watch检测到.scss变更触发热重载时，还没生成新的.css文件，所以推送的还是旧样式，才需要手动刷新才生效。按照以下步骤配置即可启用该功能：

1. 调整Client项目.csproj配置 #

打开Blazor WASM Client项目的.csproj文件，添加或修改以下配置段：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <!-- 原有项目配置全部保留，新增以下内容 -->
  <PropertyGroup>
    <!-- 开启静态资源热重载支持 -->
    <WatchStaticWebAssets>true</WatchStaticWebAssets>
    <!-- 配置LibSassBuilder在增量构建（热重载触发的构建）时也执行编译 -->
    <LibSassBuildOnIncrementalBuild>true</LibSassBuildOnIncrementalBuild>
    <!-- 配置scss编译输出路径，确保输出到wwwroot下对应的css目录，可根据自己的项目结构调整 -->
    <LibSassOutputDir>wwwroot/css</LibSassOutputDir>
  </PropertyGroup>

  <ItemGroup>
    <!-- 标记所有scss文件为Sass编译源，同时加入dotnet watch的监视列表 -->
    <SassFiles Include="scss/**/*.scss" />
    <Watch Include="scss/**/*.scss" />
  </ItemGroup>
</Project>

2. 调整Program.cs配置（仅.NET 6版本需要额外配置） #

在Program.cs的开发环境判断段添加静态资源热重载支持：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 原有服务注册逻辑保留，新增以下配置
if (builder.Environment.IsDevelopment())
{
    builder.Services.AddHotReload();
    builder.Services.AddResponseCaching();
}

await builder.Build().RunAsync();

3. 使用正确的启动命令 #

启动项目时不要使用默认的dotnet watch run，改为带热重载参数的启动命令：
dotnet watch run --hotreload --project 你的Client项目名.csproj

4. 异常排查 #

如果配置后依然不生效，检查两个点：

• 升级LibSassBuilder到最新稳定版
• 打开VS2022设置→调试→常规，确认「启用ASP.NET Core热重载」选项已勾选

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