CSS isolation in blazor-server components

Question

with the new .NET 5 preview CSS isolation comes in blazor. Does anybody know, is it possible to use the CSS isolation in blazor server?

I have play a lot around, but in my blazor server app CSS isolation doesn't work. Or is this feature only available in blazor WebAssembly?

so I tried it:

create a new blazor component, e.g. test.razor
create component CSS file with name test.razor.css and write the CSS code in this file
now start the blazor-server app, but no static CSS file will added and the CSS classes doesn't found.

TargetFramework is "net5.0". installed dotnet version is "5.0.100-rc.2.20479.15".

greetings Daniel

The template uses it by default in Server-side. For example `MainLayout.razor` and `MainLayout.razor.css` — Brian Parker, Nov 08 '20 at 13:29

score 11 · Accepted Answer · answered Nov 08 '20 at 18:29

11

ok i found the issue. In my "_Host.cshtml" file was the link to the "project.styles.css" missing:

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

with this everything works fine.

answered Nov 08 '20 at 18:29

Daniel Weber

Thank you for the hint. Also keep in mind that the `{ProjectName}` has to match `Solution > Project > Properties > Package > Product`. This may be different to the `Project` namespace. – Efthymios Mar 23 '21 at 14:19
1

This also worked for me, but is it anywhere in the documentation that this needs to be added for CSS isolation to work? – Jeremy S. May 18 '21 at 16:58
yes have a look at https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#css-isolation-bundling – Daniel Weber Jun 20 '21 at 17:53

score 0 · Answer 2 · edited Jul 22 '22 at 17:59

0

If you are using .NET 6.0 blazor server side, paste the following line:

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

On the Pages > _Layout.cshtml file and it will work as expected.

edited Jul 22 '22 at 17:59

lepsch

answered Jul 15 '22 at 17:34

Angel Del Rosario

2 Answers2