Css on razor page does not work locally but on server it does

Question

I used .net 6 with razor pages to create an application. I wanted to add some css to the home page but i was unable to do so. it just wouldn't show on the view.

After a while I let it go and just kept going. (and forgot about the css file of the home page)

Now i am deploying the website on a windows server and sundelly the css file is visable on the page and looks like this:

I checked it locally but the css was still not visible here. Locally the page lookes like this (its dutch):

Index.cshtml:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welkom</h1>
</div>

Index.cshtml.css:

body {
}

h1 {
    color: red;
    background-color: red;
}

I also tryed adding this to _Layout.cshtml but it did not work:

<link href="@Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />

Does anybody know what i am doing wrong?

Update:

Just noticed that the footer also appears to be much larger on the server but i dont have a separate css file for the footer:

Local: Server:

Answer 1

You have used the scoped CSS file (Index.cshtml.css) to declare your style instead of the standard CSS file found in wwwroot/css. The bundled CSS file that gets generated from all your scoped CSS files is named using the following format: nameof(your_assembly).styles.css. So if your app is named WebApplication1, you reference the generated file in your layout like this:

<link rel="stylesheet" href="@(nameof(WebApplication1)).styles.css" />

See more here: https://www.mikesdotnetting.com/article/355/css-isolation-in-razor-pages