Razor Class Library static file refer

Question

I am building razor class library. that can be consumed by multiple application. Razor class library has components that are developed in mudblazor.

Here is the Question : Mudblazor has static files(css,js). that is been referred by client who ever consuming. In future if mudblazor is replaced with other UI Component. Client may need to change the references for static files. What is the best approach that we can do with out changing the client references.That mean client should not change anything(css,js references).

Washedout

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Grof

Answer 1

If I am understanding your question correctly, you want to be able to add components that have JS and CSS dependencies without adding additional references within the application consuming the component. So if you remove them later, you dont need to go back and clean those references up?

If you had a component called MyCustomComponent and it had css files associated with that but nothing else, you can name them the same and keep them beside eachother. Blazor will then only use them in that component. For example

• MyCustomComponent.razor
• MyCustomComponent.razor.css

This is known as CSS isolation. https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

There is a recent addition to add this for JS as well if you are using .NET 6 and VS2022 preview. See https://github.com/dotnet/sdk/pull/19270

If you are using .NET 5, then the JS will need to be on wwwroot still as described in this blog post below

https://www.meziantou.net/javascript-isolation-in-blazor-components.htm

Cowled

Does that mean I can create Component library without "forcing" user to add something to index.html? – Montez

Yes, that is correct. – Cowled

@Lotok, the first paragraph you wrote is exactly what I want to do for multiple components. That is, having a single JS file that can be used across all component files in the Razor Class Library. I could use JSRuntime to import the JS file into every component, but do you know if there is a way to avoid such repetition? – Kaminski