How to add css file in razor componet by using Razor Class Library ?

mehmood tekfirst 771 Reputation points
2022-06-02T10:04:52.283+00:00

Hi,

I am developing a Widget by using Razor Page and Razor Component through Razor Class Library.

207797-image.png

I tried to add the CSS as it is described in following URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0

Now When I try to compile this RCL project then Compiler displays this error as mentioned below:

Severity Code Description Project File Line Suppression State  
Error RZ5000 @import rules are not supported within scoped CSS files because the loading order would be undefined. @import may only be placed in non-scoped CSS files. CarRentalWidget.RCL RentalWidget.RCL\Areas\CarWidgetUI\Pages\AutoCompleteLocationsComponent.razor.css 1  

207750-image.png

I want to use CSS in such a way , I wouldn't have to use it / refer it in some external means.

I want to embed css enclosed with razor.component within a razor class library.

How can I use it ?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,777 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,941 Reputation points Microsoft Vendor
    2022-06-06T06:25:35.523+00:00

    Hi @mehmood tekfirst ,

    But In that case what would I need to do ?

    If I want to use some google font. Would I have to download in the our project and then use directly rather getting thrugh http or https.

    To use the google fonts, you can add the Google Fonts CSS reference in the MVC project, instead of the RCL.

    Like this: in the main page's view page or Layout page, add the google fonts reference:

    208605-image.png

    Then, in the RCL component, use the CSS style:

    208587-image.png

    The result as below:

    208652-image.png


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,941 Reputation points Microsoft Vendor
    2022-06-03T02:01:45.883+00:00

    Hi @mehmood tekfirst ,

    When using ASP.NET Core Blazor CSS isolation, in order to guarantee style isolation when bundling occurs, importing CSS in Razor code blocks isn't supported.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.