样式表代码不会反映在razor页面上

我正在开发我的第一个。net核心web应用程序。我正试着把我的公司标志放在版面上。cshtml页面,但似乎是样式表网站。css不被_布局页面识别。下面是我的_布局代码。cshtml页面:

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

</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="headerDiv">
                <div class="headerTopBanner"></div>
                <div class="headerLogo">
                    <div class="logo"></div>
                </div>
                <h1 class="display-4">Welcome</h1>

            </div>
            </nav>

    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

还有我的网站。css定义如下:

.headerDiv {
    background-color: white;
}

.headerTopBanner {
    background-color: $header-top-banner-color;
    height: 5px;
    width: 100%;
}

.headerLogo {
    padding: 5px;
    padding-left: 10px;
    vertical-align: middle;
}

.logo {
    background: url(../../images/LogoWithDesc) 0 0;
    min-height: 70px;
    vertical-align: middle;
}

$header-top-banner-color: #FD810A;

输出的屏幕截图如下所示:

我在索引中有类似的代码。cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}


<div class="headerDiv">
    <div class="headerTopBanner"></div>
    <div class="headerLogo">
        <div class="logo"></div>
    </div>
    <h1 class="display-4">Welcome</h1>

</div>

这就是为什么欢迎会在我的页面上出现两次,但logo和其他一些颜色不会出现。似乎是那个网站。css根本不被认可。

我们将非常感谢您的帮助,