Different css files in Blazor pages

Question

I want to use different css files for different layout and pages in Blazor. So, I don't want to import all css files directly into index.html but into every single page or layout when it needs.

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />

<link href="lib/font-awesome/css/all.min.css" rel="stylesheet" />
<link href="customCss/adminpanle.min.css" rel="stylesheet" />

So, 2 links that I have added at the bottom, I want to add them only one layout, not into index.html file. Question is: How can I add css to the blazor page(.razor file)?

Thanks in advance!

Steinke

What do you have so far? Provide code samples. – Actinouranium

I edited my question, hope it is more clear now. Thanks for your answer – Steinke

I need exactly the same. I have one Blazor application, with 2 parts: Admin and EndUser. Each part is using different bootstrap css. I am struggling to figure out how to achieve this. – Gain

Answer 1

You could do it two ways that I can think of:

1. Add a <style></style> tag to your page component and put your css styles into that tag. It won't be on a separate file. I've done this so I can use style selectors that need variable data. The @ operator to load in C# stuff works even in that case.

2. Load the CSS file via javascript interop. The javascript portion to do it is found in this answer: How to load up CSS files using Javascript?

Gorilla

Thanks for your answer. But I have done it with adding css <link> tag into components that I want with a suggestion of a friend. But that is not as much as good solution because there is a latency during the loading of css in components and in the main .html file. – Steinke