CSS style loading failed after RCL library release ?

Question

CSS style loading failed after RCL library release ?

929Free 641

hi, I have created a new RCL library. (RazorClassLibrary1 .net 9.0)

Component1.razor :

@page "/test1"

<div class="my-component">
    This component is defined in the <strong>RazorClassLibrary1</strong> library.
</div>

Component1.razor.css :

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Then I created a blazor web app project (server mode).

_Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorApp1
@using BlazorApp1.Components

@using RazorClassLibrary1;

App.razor :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["BlazorApp1.styles.css"]" />
    <ImportMap />
    <link rel="stylesheet" href="@Assets["RazorClassLibrary1.styles.css"]">
    <link rel="stylesheet" href="@Assets["_content/RazorClassLibrary1/RazorClassLibrary1.styles.css"]">
    <HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Routes.razor:

<Router AppAssembly="typeof(Program).Assembly"
        AdditionalAssemblies="new[] {
                    typeof(RazorClassLibrary1._Imports).Assembly
                }">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Programs.cs:

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(RazorClassLibrary1._Imports).Assembly)
    .AddInteractiveServerRenderMode();

app.Run();

IDE: Microsoft Visual Studio Community 2022 (64 位) - Current 版本 17.14.4

I have copied the RazorClassLibrary1.styles.css file of the released RCL library to wwwroot file.

Why is the style still not displaying correctly?

I didn't set it up somewhere, right? Can you help me? Thank you.

khushiee sharma 0 Reputation points

2025-06-08T17:23:47.0966667+00:00
Hiii 9299free

I have some tips for your problem that you face

Do NOT manually copy RazorClassLibrary1.styles.css

You should not copy this file to wwwroot. Let Blazor handle it via static web assets.

🔹 2. Use the correct static web asset path

Update your <head> in App.razor like this (keep only the line below and remove any others that reference styles.css):

razor Copy <link href="_content/RazorClassLibrary1/RazorClassLibrary1.styles.css" rel="stylesheet" />

Make sure the casing matches exactly and this line is in your App.razor or _Layout.cshtml (depending on your host model).

🔹 3. Ensure RCL project uses Razor SDK

Check your RCL's .csproj file. It should look like this:

xml Copy <Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <TargetFramework>net9.0</TargetFramework> <RazorLangVersion>9.0</RazorLangVersion> </PropertyGroup> </Project>

🔹 4. Verify that the component is used

Styles in .razor.css are included only if the component (like Component1.razor) is actually rendered in your app.

Check if you're navigating to /test1 in the browser, or manually add this to a test page:

razor Copy <Component1 />

🔹 5. Build and Run Again

Clean and rebuild both projects:

bash Copy dotnet clean dotnet build dotnet run

Make sure no old or incorrect files are lingering.

these are the some suggestion for you

Anonymous

.my-component {

border: 2px dashed red;

padding: 1em;

margin: 1em 0;

background-image: url('background.png');

}

929Free 641 Reputation points

2025-06-08T17:58:14.7166667+00:00
hi, ThiriSTMelsan182-0595, My operation steps are as follows :

I created the blazor web app (.net 9.0)

I created the RCL library (.net 9.0)

Later, I released the RCL library to a file. (path: bin\Release\net9.0\publish)

I copied the RazorClassLibrary1.dll file to the Components \ Pages folder of the blazor main program and referenced it

I modified the Home.razor file of the main program as follows: @page "/" <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. <RazorClassLibrary1.Component1></RazorClassLibrary1.Component1>

I also added a link link in the head of the App. razor file : <link href="_content/RazorClassLibrary1/RazorClassLibrary1.styles.css" rel="stylesheet" />

Because I don't want to release the source code of the RCL library project, I chose to publish it.Previously, it was referenced in this way in version 9.0.3. However, after upgrading to 9.0.5, it no longer works. I wonder if this is related to the upgrade.The purpose of releasing the RCL library separately is to protect the source code, which can only be owned by me personally and I do not want to disclose it. thanks
929Free 641 Reputation points

2025-06-08T17:59:35.6433333+00:00

hi, khushiee sharma, Thank you, could you please take a look at the content of my reply and see if my actions are correct.

929Free 641

RCL's .csproj file :

<TargetFramework>net9.0</TargetFramework>

<RazorLangVersion>9.0</RazorLangVersion>

<Nullable>enable</Nullable>

<ImplicitUsings>enable</ImplicitUsings>

</PropertyGroup>

<SupportedPlatform Include="browser" />

</ItemGroup>

<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5" />

</ItemGroup>

</Project>

929Free 641

My Create RCL's .csproj file content:

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <RazorLangVersion>9.0</RazorLangVersion>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>


  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5" />
  </ItemGroup>

</Project>

Accepted answer

1 additional answer

Your answer

khushiee sharma 0 Reputation points

2025-06-08T17:23:47.0966667+00:00

Hiii 9299free

I have some tips for your problem that you face

Do NOT manually copy RazorClassLibrary1.styles.css

You should not copy this file to wwwroot. Let Blazor handle it via static web assets.

🔹 2. Use the correct static web asset path

Update your <head> in App.razor like this (keep only the line below and remove any others that reference styles.css):

razor Copy <link href="_content/RazorClassLibrary1/RazorClassLibrary1.styles.css" rel="stylesheet" />

Make sure the casing matches exactly and this line is in your App.razor or _Layout.cshtml (depending on your host model).

🔹 3. Ensure RCL project uses Razor SDK

Check your RCL's .csproj file. It should look like this:

xml Copy <Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <TargetFramework>net9.0</TargetFramework> <RazorLangVersion>9.0</RazorLangVersion> </PropertyGroup> </Project>

🔹 4. Verify that the component is used

Styles in .razor.css are included only if the component (like Component1.razor) is actually rendered in your app.

Check if you're navigating to /test1 in the browser, or manually add this to a test page:

razor Copy <Component1 />

🔹 5. Build and Run Again

Clean and rebuild both projects:

bash Copy dotnet clean dotnet build dotnet run

Make sure no old or incorrect files are lingering.

these are the some suggestion for you
Anonymous

2025-06-08T17:25:43.7333333+00:00

.my-component {

border: 2px dashed red; padding: 1em; margin: 1em 0; background-image: url('background.png');

}
929Free 641 Reputation points

2025-06-08T17:58:14.7166667+00:00

hi, ThiriSTMelsan182-0595, My operation steps are as follows :

I created the blazor web app (.net 9.0)

I created the RCL library (.net 9.0)

Later, I released the RCL library to a file. (path: bin\Release\net9.0\publish)

I copied the RazorClassLibrary1.dll file to the Components \ Pages folder of the blazor main program and referenced it

I modified the Home.razor file of the main program as follows: @page "/" <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. <RazorClassLibrary1.Component1></RazorClassLibrary1.Component1>

I also added a link link in the head of the App. razor file : <link href="_content/RazorClassLibrary1/RazorClassLibrary1.styles.css" rel="stylesheet" />

Because I don't want to release the source code of the RCL library project, I chose to publish it.Previously, it was referenced in this way in version 9.0.3. However, after upgrading to 9.0.5, it no longer works. I wonder if this is related to the upgrade.The purpose of releasing the RCL library separately is to protect the source code, which can only be owned by me personally and I do not want to disclose it. thanks
929Free 641 Reputation points

2025-06-08T17:59:35.6433333+00:00

hi, khushiee sharma, Thank you, could you please take a look at the content of my reply and see if my actions are correct.
929Free 641 Reputation points

2025-06-08T18:07:08.4733333+00:00

RCL's .csproj file :

<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>

<TargetFramework>net9.0</TargetFramework> <RazorLangVersion>9.0</RazorLangVersion> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings>

</PropertyGroup>

<ItemGroup>

<SupportedPlatform Include="browser" />

</ItemGroup>

<ItemGroup>

<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5" />

</ItemGroup>

</Project>
929Free 641 Reputation points

2025-06-08T18:08:28.45+00:00

My Create RCL's .csproj file content:

<Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <TargetFramework>net9.0</TargetFramework> <RazorLangVersion>9.0</RazorLangVersion> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <ItemGroup> <SupportedPlatform Include="browser" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5" /> </ItemGroup> </Project>

Answer 1

Pradeep M 9,765 Microsoft External Staff Volunteer Moderator

Hi 929Free

Thank you for reaching out to Microsoft Q & A forum.

When using CSS isolation in a Razor Class Library (RCL), it is important not to manually copy the .styles.css file into your application's wwwroot folder. Instead, please ensure the following:

The static assets such as background.png are included within the RCL project’s own wwwroot folder so they are properly published.

Your Blazor application references the RCL styles using the automatically generated path:

Avoid duplicating or manually adding additional stylesheet references.

Manually copying the stylesheet can break CSS scoping and resource paths, which may cause the styles not to load correctly.

After making these adjustments, please perform a clean rebuild of your solution.

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.

929Free 641 Reputation points

2025-06-08T15:30:47.5166667+00:00

After following the above steps to modify, the browsing/test1 page style effect still does not take effect. Why is that?
929Free 641 Reputation points

2025-06-08T15:55:10.9133333+00:00

I tried the method you provided, but the problem still hasn't been solved. Where exactly is it that hasn't been set up correctly？Previously, it was normal to load after publishing like this
929Free 641 Reputation points

2025-06-08T16:29:49.0266667+00:00

The browser always prompts：Failed to load resource: net::ERR_CONTENT_DECODING_FAILED
Pradeep M 9,765 Reputation points Microsoft External Staff Volunteer Moderator

2025-06-09T04:16:28.5433333+00:00

Thanks for the update. The ERR_CONTENT_DECODING_FAILED error usually means there's an issue with how the CSS file is served often due to compression or file corruption.

Please check the following:

1.Make sure you're not manually copying the .styles.css file.

2.Try accessing the CSS file URL directly in the browser: https://<your-app>/_content/RazorClassLibrary1/RazorClassLibrary1.styles.css. If it fails to load, that confirms a server issue.

3.Try disabling compression (if enabled) in your server or proxy settings.

4.Do Clean + Rebuild, then publish again without manual edits.
929Free 641 Reputation points

2025-06-09T10:30:45.8533333+00:00

After multiple tests, I found that if the main program wwwroot directory contains the RazorClassLibrary1.styles.css file, RazorClassLibrary1.styles.css.br file, and RazorClassLibrary1.styles.css.gz file at the same time, there will be a problem of style loading failure.May I ask what the reason is?
929Free 641 Reputation points

2025-06-09T10:32:14.8033333+00:00

If only the RazorClassLibrary1.styles.css file exists in the wwwroot directory of the main program, the style loading is correct. Can you teach me？thanks
Pradeep M 9,765 Reputation points Microsoft External Staff Volunteer Moderator

2025-06-10T06:12:47.15+00:00
Thank you for clarifying. The issue arises because having .br or .gz compressed files manually placed in the wwwroot folder can cause the server to serve them incorrectly, resulting in the ERR_CONTENT_DECODING_FAILED error.

To resolve this, please remove the .br, .gz, and .styles.css files from the wwwroot directory. Blazor will handle style loading automatically using the reference:

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

After removing the files, perform a clean rebuild and republish the application. This should ensure the styles load correctly.

Answer 2

Anonymous

razor

Copy

Anonymous

2025-06-08T17:26:05.6+00:00

razor

Copy

<Component1 />

Share via

CSS style loading failed after RCL library release ?

1 additional answer

Your answer