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:

Hi there. How do you configure web compile to take the scss file for isolation?. — elchente23, Nov 17 '21 at 19:19
@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, Dec 01 '21 at 05:48
Thanks for your answer, Do I need to import that scss file to the main scss file or It's not necessary? — elchente23, Dec 02 '21 at 05:33
@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, Dec 10 '21 at 06:48

score 26 · Answer 1 · answered May 03 '21 at 08:17

26

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

answered May 03 '21 at 08:17

Daniël J.M. Hoffman

1,539
10
16

1

This solution works perfectly without removing anything ! Thank you – Vincent Ducroquet Sep 02 '21 at 08:16
What would be the equivalent for Blazor WASM? – Divan Aug 12 '23 at 11:02

score 16 · Answer 2 · answered May 08 '21 at 11:37

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

score 10 · Accepted Answer · answered Nov 15 '20 at 16:39

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>

I am having this issue but nothing to remove these two in my csproj file. — Khant Htet Naing, Dec 20 '20 at 03:48
Had the same issue. It worked after a few rebuilds, without changing anything in the csproj file. — Pavel M., Jan 16 '21 at 15:09

score 4 · Answer 4 · answered Apr 06 '22 at 18:16

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.

answered Apr 06 '22 at 18:16

Design.Garden

3,607
25
21

This really needs to be documented here -- https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio – Brian Apr 10 '22 at 19:45

score 0 · Answer 5 · answered Jun 17 '23 at 18:51

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" />

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

5 Answers5

Linked