8

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!

Emba Ayyub
  • 657
  • 2
  • 7
  • 12
  • What do you have so far? Provide code samples. – Frank Oct 18 '19 at 12:35
  • 1
    I edited my question, hope it is more clear now. Thanks for your answer – Emba Ayyub Oct 18 '19 at 12:43
  • 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. – walter33 Nov 26 '21 at 03:05

1 Answers1

4

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?

Lee McPherson
  • 931
  • 6
  • 20
  • 1
    Thanks for your answer. But I have done it with adding css 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. – Emba Ayyub Oct 21 '19 at 11:20