Enable CSS isolation of RCL to work in blazor server

2
votes

I have a razor class library and blazor server that consumes this library, each component in RCL has own css, after reading documentation of microsoft ASP.NET Core Blazor CSS isolation I did the following:

  1. In my razor page of blazor server I added my component: <MyComponent />
  2. In _Host page I added link for bundeling: <link href="Blazor.Components.styles.css" rel="stylesheet">.

After running the application I couldn't see the css of MyComponent.

Did I make something wrong? Can you give me some advice?. I read this page that follows the same approach but for Webassembly!.

Thanks.

1
blazorblazor-server-side

1 Answers

2
votes

Quoting Razor class library (RCL) support docs:

When a Razor class library (RCL) provides isolated styles, the tag's href attribute points to {STATIC WEB ASSET BASE PATH}/{ASSEMBLY NAME}.bundle.scp.css, where the placeholders are:

  • {STATIC WEB ASSET BASE PATH}: The static web asset base path.
  • {ASSEMBLY NAME}: The class library's assembly name.

In the following example:

  • The static web asset base path is _content/ClassLib.
  • The class library's assembly name is ClassLib.

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

In _Host page you should to add something like:

<link href="_content/YourClassLib/YourClassLib.bundle.scp.css" rel="stylesheet">