Add two different HTML Layout to Blazor WASM

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?