Blazor CSS 迁移到 .NET 5.0 并使用 SASS 后，隔离不起作用并且不添加作用域标识符

Question

我最近将一个宠物项目从 Blazor .NET 3.1 迁移到了 .NET 5.0，我正在尝试切换到使用 css 隔离。

我创建了一个 scss 文件（使用 webcompiler 扩展编译成 css 文件），其前缀与我的组件相同：

我已将生成的 css 包含在我的 index.html 文件中：

<link href="FinNodeWASM.Client.styles.css" rel="stylesheet">

Dotnet 正在正确生成 css 并按预期附加范围标识符属性：

但是，当我查看生成的 HTML 时，我在那里没有看到预期的分数标识符属性：

Answer 1

我在升级一个简单的项目时遇到了同样的问题。我比较了一个新创建的 Blazor csproj 文件并删除了 RuntimeIdentifier 和 Razor LangVersion 为我修复了它。

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    *** DELETE THIS LINE *** -> <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
    *** DELETE THIS LINE *** -> <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0' ">
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-*" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-*" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.0-*" />
    <PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="5.0.0-*" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-*" />
  </ItemGroup>


</Project>

Answer 2

升级到 .NET 5 后，我忘记在我的 Blazor Server 项目中包含 _Host.cshtml 中的引用。感谢您在上述问题中指出:)

包含参考可以解决问题：

<link href="AssemblyName.styles.css" rel="stylesheet">

Answer 3

当我的 ASPNETCORE_ENVIRONMENT 设置为 'Development' 以外的值时，我遇到了这个问题。这似乎是一个已知问题，要解决您需要在 Program.cs:

中设置 webBuilder.UseStaticWebAssets();

public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .UseSerilog()
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStaticWebAssets();
                    webBuilder.UseStartup<Startup>();
                });

问题：https://github.com/dotnet/aspnetcore/issues/28911

解决方案：https://github.com/dotnet/aspnetcore/issues/28174#issuecomment-734239932

Answer 4

使用最新的 Blazor Server 模板，将以下行添加到 Program.cs:

var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets(); // The fix.

我不知道为什么会这样，但其他解决方案不适合 Blazor Server 模板，所以我通过反复试验对此进行了调整。

Blazor CSS 迁移到 .NET 5.0 并使用 SASS 后，隔离不起作用并且不添加作用域标识符

Blazor CSS Isolation not working and not adding scope identifiers after migrating to .NET 5.0 and using SASS

sass

web-compiler

.net-5