Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Isolation & RCL Support does not generate the correct CSS import for WASM Apps not hosted at root

See original GitHub issue

Is there an existing issue for this?

I have searched the existing issues

Describe the bug

The documentation here states that CSS from the RCL’s stylesheet is imported at the top of the app’s stylesheet:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#razor-class-library-rcl-support

However, if the Blazor app is not hosted from root (for example where multiple WASM apps are being hosted from a single server at different urls), the URL created in the import statement ignores the StaticWebAssetBasePath.

However the documentation for hosting multiple WASM applications states that RCL CSS should be added manually to index.html

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#static-assets-and-class-libraries-for-multiple-blazor-webassembly-apps

Adding the RCL CSS this way solves the problem, but the RCL is still also imported into the parent app CSS, and results in a 404. However adding the base path to the imported css file path results in a 200.

Expected Behavior

Either the CSS Import should use the correct url, or there should be a way to disable the import statement and link the css manually in Index.html

Steps To Reproduce

Example App here: https://github.com/philip-reed/HostedBlazorWithBaseHrefCss

The BlazorApp1.Client has a reference to RasorClassLibrary1 which has a SharedCounter component with custom CSS. BlazorApp1.Client is served from /demo

Exceptions (if any)

NONE

.NET Version

6.0.201

Anything else?

Visual Studio 2022 - Running locally ASPNETCORE_ENVIRONMENT=Development

Issue Analytics

State:
Created a year ago
Comments:15 (9 by maintainers)

Top GitHub Comments

1reaction

guardrexcommented, May 11, 2022

@philip-reed … When you reach a final working approach based on @javiercn’s remarks, please comment on the docs issue that I opened at …

https://github.com/dotnet/AspNetCore.Docs/issues/25836

… with the changes you made to your repro project at …

https://github.com/philip-reed/HostedBlazorWithBaseHrefCss

… to get it working. That will aid in updating docs for this scenario.

1reaction

javiercncommented, May 11, 2022

@guardrex can we get the docs updated for this topic?

Top Results From Across the Web

ASP.NET Core Blazor CSS isolation

Learn how CSS isolation scopes CSS to Razor components, which can simplify CSS and avoid collisions with other components or libraries.

Enable CSS isolation of RCL to work in blazor server

I have a razor class library and blazor server that consumes this library, each component in RCL has own css, after reading documentation...

CSS Isolation in Blazor Server (Net 7) project not working

CSS isolation works by adding deterministic attributes to all components and Css selectors, thus they can be scoped at runtime to the component ......

Use CSS isolation in your Blazor projects - Dave Brock

I'm excited to see Blazor now supporting CSS isolation—also known as scoped CSS. This post discusses how to use CSS isolation with the ......

How to display image in blazor. svg file in a text editor ...

1 Answer. svg), are supported via the tag: Display SVG image in razor view ASP. ... In this crash course, we build an...