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

Question

I've recently migrated a pet project from Blazor .NET 3.1 to .NET 5.0 and am trying to switch to using css isolation.

I've created a scss file (which compiles to a css file using the webcompiler extension) with the same prefix as my component:

I've included the generated css in my index.html file:

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

Dotnet is generating the css correctly and appending the scope identifier attribute as expected:

However, when I look at the generated HTML I don't see the expected score identifier attribute there:

Answer 1

I was having the same issue when upgrading a simple project. I compared a newly created Blazor csproj file and deleting the RuntimeIdentifier and RazorLangVersion fixed it for me.

<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

After upgrading to .NET 5 I forgot to include the reference in _Host.cshtml in my Blazor Server project. Thanks for pointing it out in the question above :)

Including the reference fixes the problem:

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

Answer 3

I experienced this issue when my ASPNETCORE_ENVIRONMENT was set to something other than 'Development'. This seems to be a known issue, and to resolve you need to set webBuilder.UseStaticWebAssets(); in Program.cs:

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

Issue: https://github.com/dotnet/aspnetcore/issues/28911

Solution: https://github.com/dotnet/aspnetcore/issues/28174#issuecomment-734239932

Answer 4

Using the latest Blazor Server template, add the following line to Program.cs:

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

I don't know why this works, but other solutions did not fit the Blazor Server template, so I adapted this via trial & error.

Answer 5

In my case, i had a referenced project containing reusable components, so after investigating, i realised that scoped Css needs to be bundled up. What l did, l clean and rebuild my main project and new Css was added to the bundle. if you are using a shared project make sure you add the following Css reference in your index.html inside your main project wwwroot. [BlazorWASM]

<link href="MainProjectName.styles.css" rel="stylesheet" />
<link href="_content/ReferenceProjectNamespace.styles.css" />

Answer 6

I had to remove the following line in the Client.csproj:

<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>