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?

Michel Jansson · Accepted Answer · 2020-12-05 10:58:02Z

6

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.

answered Dec 5, 2020 at 10:58

Michel Jansson

2,2961 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Parker · Accepted Answer · 2020-12-06 20:10:37Z

4

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; 
...

answered Dec 6, 2020 at 20:10

Brian Parker

15k3 gold badges41 silver badges46 bronze badges

Collectives™ on Stack Overflow

Shared CSS file blazor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related