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!

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?