Blazor component not linking css

Question

I have a Blazor server app with a client project. In the client project, I have a bunch of pages and components. Adding a file with the same name as the razor page with the CSS extension worked so far to create scoped CSS files… But somehow not anymore.

I added a new page under the page's folder. Named Historia.razor. Added a Historia.razor.css file in the same folder. Visual Studio understands it nicely and nests the CSS page under the main razor file.

But when compiling and running the app, the styles do not appear. I checked the combined CSS file (MyApp.styles.css) and there are no entries from the Historia.razor.css file. Also checked the styles on the generated page and they don't contain the b-213321 extra ID on the class names.

I checked the project file to ensure the file is not under the "ignore", It is not. This is what the project file looks like:

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

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Blazored.Toast" Version="3.2.2" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.3" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="6.0.3" />
  </ItemGroup>

    <ItemGroup>
        <Watch Include="**\*.razor" />
    </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Shared\VikingBoardGames.Shared.csproj" />
  </ItemGroup>


</Project>

Once again, it DOES WORK for other components and pages that I added in the past and follows the same exact folder/naming structure.

Any ideas on what is preventing the CSS to be bundled with the rest?

NOTE: After doing a clean - build -delete .vs folder - restart VS as suggested by Henk Holterman my tags do show the b-312412wgz code. But still, the styles are not applied and the CSS content is not added to the myproject.styles.css file.

I tried also to create a new file, with its CSS file. Exactly the same behavior.

Conti

After doing that, my tags DO have an extension code looking like <div class="MainDiv" b-2134234wgp> But the CSS file is not included in the combined styles.css file. And the tag does not exhibit any of its definitions. – Conti

you won't believe but Control+F5 Is fixing the fricking thing ... I feel ashamed... If you would post the clean-rebuild-restart-Ctrl+F5 as a solution I will gladly accept. Otherwise, I will remove the question, but I'm sure more people will find this issue and would thank you for the suggestion. – Conti

Answer 1

Whenever things don't work as they should, the following steps might help:

• Do a Build|Clean Solution
• Close VS
• In the Solution folder, delete the .vs folder
• Reopen the Project and do a Build|Rebuild

and in case of a Web App,

• Use Ctrl+F5 to force refresh all files
• With the Dev tools (F12), go to the Application tab and clean the Cache and Local storage.

Cross your fingers and try again.

Thaothapa

Answer 2

Had similar issues - managed to get it working my wrapping target elememt in a div and prefixing the class name with as follows -

div ::deep > .my-class-name {
}

and in razor:

<div>
   <Component Class="my-class-name" />
</div>

a bit hacky but it worked for me.

Hardened

This is deprecated. (deprecated) /deep/, >>>, and ::ng-deep per angular.io monsterlessons-academy.com/posts/…. – Dermoid

Answer 3

I solved it by modifying the project file. Here's an example of the code I used:

<ItemGroup>
    <Content Include="foldername\component.razor.css"/>
</ItemGroup>

Example:

<ItemGroup>
        <Content Include="Shared\MainLayout.razor.css"/>
</ItemGroup>

Process