I started a new project using Blazor WASM, I decided to create two group of pages for the frontend and the admin, I Created two different Layout.Razor pages and I copied all of my css and js files to two different folders in wwwroot. Now I have problem where shall I define my css files for admin and frontend.

I Created the razor.css file for my layout page and I tried to import my admin CSS files into it but I faced the compiler error which I am not allowed to do,

MyProject\Layout\MainLayout.razor.css(1,1): @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.

I copy and paste all the CSS files into mainlayout.razor.css file and I see some how it doesn't work and it doesn't apply the CSS variables.

:root {
--primary-color         : #222222;
--dark-primary-color    : #FFFFFF;
--secondary-color       : #F5F5F5;
--text-color            : #777777;
--divider-color         : #DDDDDD;
--dark-text-color       : #AEAEAE;
--dark-divider-color    : rgba(255, 255, 255, 0.10);
--error-color           : rgb(230, 87, 87);
--accent-font           : 'Hanken Grotesk', sans-serif;
--default-font          : 'DM Sans', sans-serif;
--transition            : all 0.3s ease-in-out;
--image-filter          : grayscale(100%);
--image-filter-hover    : grayscale(0);
--ticker-gap            : 40px;
--photo-gap             : 15px;

I created the HeadContent tag in my layout page, it works but somehow it loads the page first then apply the css classes which has not have a good look.

Is there any other way that I didn't think about?

I started a new project using Blazor WASM, I decided to create two group of pages for the frontend and the admin, I Created two different Layout.Razor pages and I copied all of my css and js files to two different folders in wwwroot. Now I have problem where shall I define my css files for admin and frontend.

I Created the razor.css file for my layout page and I tried to import my admin CSS files into it but I faced the compiler error which I am not allowed to do,

MyProject\Layout\MainLayout.razor.css(1,1): @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.

I copy and paste all the CSS files into mainlayout.razor.css file and I see some how it doesn't work and it doesn't apply the CSS variables.

:root {
--primary-color         : #222222;
--dark-primary-color    : #FFFFFF;
--secondary-color       : #F5F5F5;
--text-color            : #777777;
--divider-color         : #DDDDDD;
--dark-text-color       : #AEAEAE;
--dark-divider-color    : rgba(255, 255, 255, 0.10);
--error-color           : rgb(230, 87, 87);
--accent-font           : 'Hanken Grotesk', sans-serif;
--default-font          : 'DM Sans', sans-serif;
--transition            : all 0.3s ease-in-out;
--image-filter          : grayscale(100%);
--image-filter-hover    : grayscale(0);
--ticker-gap            : 40px;
--photo-gap             : 15px;

I created the HeadContent tag in my layout page, it works but somehow it loads the page first then apply the css classes which has not have a good look.

Is there any other way that I didn't think about?

• blazor
• blazor-webassembly
• webassembly

Share Improve this question Follow edited Mar 23 at 13:07 Amir asked Mar 23 at 3:40 AmirAmir 4111 silver badge99 bronze badges 2

• Post what you have tried and add the compiler errors. – Henk Holterman Commented Mar 23 at 10:19
• @HenkHolterman I added the css selectors and the compiler error. – Amir Commented Mar 23 at 13:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In order to guarantee style isolation when bundling occurs, importing CSS in Razor code blocks isn't supported.