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

18
votes

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:

SCSS

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: Generated CSS

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

enter image description here

4
sass.net-5web-compiler
Hi there. How do you configure web compile to take the scss file for isolation?. - elchente23
@elchente23 - I used the webcompiler visual studio extension to set up compilation of the scss. Then as long as your compiled .css file has the same name and is in the same folder as your .blazor file then it will be isolated. - Matthew Conradie
Thanks for your answer, Do I need to import that scss file to the main scss file or It's not necessary? - elchente23
@elchente23 - WebCompiler creates a compilerconfig.json file in which it lists all scss files to compile and where to create the output css. Make sure that the output css has the same name and is in the same folder as the .blazor file. Blazor should automatically include your css without you having to specify it anywhere. - Matthew Conradie

4 Answers

11
votes

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

11
votes

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">
11
votes

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>
1
votes

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.