39

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

Improve this question
4
  • Hi there. How do you configure web compile to take the scss file for isolation?. Commented Nov 17, 2021 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. Commented Dec 1, 2021 at 5:48
  • Thanks for your answer, Do I need to import that scss file to the main scss file or It's not necessary? Commented Dec 2, 2021 at 5: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. Commented Dec 10, 2021 at 6:48

6 Answers 6

Reset to default
36

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">
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This solution works perfectly without removing anything ! Thank you
What would be the equivalent for Blazor WASM?
17

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

Improve this answer

Comments

10

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>
Improve this answer

3 Comments

Thanks! Removing the <RazorLangVersion>3.0</RazorLangVersion> did the trick for me.
I am having this issue but nothing to remove these two in my csproj file.
Had the same issue. It worked after a few rebuilds, without changing anything in the csproj file.
8

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.

Improve this answer

2 Comments

This really needs to be documented here -- learn.microsoft.com/en-us/aspnet/core/razor-pages/…
.net 8. server side doesnt work even with this
3

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" />
Improve this answer

Comments

1

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

<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.