Shared CSS file blazor

Question

I have 2 pages in my Blazor app working:

Login.razor in the Auth folder

AddPerson.razor in the Profile folder

Now I have a CSS file working for the AddPerson.razor file.

My question is how can I work with the same CSS file for both pages?

Answer 1

The strengths of the new .NET5 CSS isolation feature (placing a css file "below" your razor file), is that the css is NOT shared between pages/components making them easier to develop and contained/bundled to the specific component.

If you however want to add some shared css that would be available thru out your app, you would do it "the old fashion way" by editing the site-wide css file. Using the Blazor templates, that would be wwwroot/css/site.css for server side or wwwroot/css/app.css for client side.

Answer 2

Late alternative answer sorry. I have the "Web Compiler" extension installed. You can create a.scss file that imports another handy for definitions etc.

MessageView.razor.scss

@import "common.scss";

.bubble {
    border-radius: 5px;
    box-shadow: $bubbleShadow; 
...