How do I link css in asp.net mvc core?-CodePudding

Trying to learn how to link my css into the Home index file. Cant believe I'm not getting this to work. Hope you can help me. So, I've created a standard mvc core project, in the views and homefolder, I'm creating a new stylesheet, with same name as index, Index.cshtml.css, its not getting nested as I saw on some tutorial. But its there,

Rest of the code is like this: This is the css file

.helloWorld {
font-family: Arial;
font-size: 60px;
font-weight: bold;
color: blue;
}

Here is the head in the Layout file

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - VueDemoApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/VueDemoApp.styles.css" />
    </head>

All I have added is the the VueDemoApp styles, where am I doing wrong here?

Oh, also the Index.cshtml file:

<div>
<h1 class="helloWorld">Hello World!</h1>
</div>

As you can see, nothing special with this project just trying to understand how to get the css to work, I don't have a problem with css, only linking the freakin thing :'D

CodePudding user response：

To be nested, try to name it Index.css instead of Index.cshtml.css.

CodePudding user response：

I moved the css file into root/css and then linked it and now it works!