如何从 .cshtml 页面调用外部样式表？答案

【问题标题】：How do I call an external stylesheet from a .cshtml page?如何从 .cshtml 页面调用外部样式表？
【发布时间】：2018-06-20 17:01:20
【问题描述】：

我有一个视图页面 (View.cshtml) 和一个样式表 (Style.css)。

样式表位于名为“Stylesheet”的文件夹中，视图页面位于 Views/Home/View.cshtml 中。我正在尝试通过以下代码将样式表链接到视图页面：

<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">

当我运行项目时，它显示了视图页面的内容，但没有实现样式。我可以知道我做错了什么吗？

更新：

View.cshtml

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" /> ‌
    <title>Test Page</title>
</head>

<body>

    <div id="topHeader">
        <br />

        <div id="credentialsBox">

            <div id="texts">
                <div id="word1">Username:</div>
                <div id="word2">Password:</div>
            </div>
        </div>
    </div>
</body>

Style.css

@font-face {
    font-family: 'proximanova';
    src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}


/*CSS Styling Properties*/
body {
    font-family: proximanova;
    margin: 0;
    background-color: #007381;
}

#topHeader{
    margin-top: 15%;
    height: 450px;
    background-color: #d6d6d6;
}

#credentialsBox {
    border-radius: 3%;
    width: 20%;
    margin: auto;
    margin-top: -5%;
    background-color: #ffffff;
}

#texts {
    padding: 14%;
    text-align: center;
}

_Layout.cshtml

<!DOCTYPE html>
<html>

    <head>
        @RenderSection("css", false)
    </head>

    <body>
        @RenderBody()
    </body>

</html>

如果 CSS 样式有点乱，我很抱歉，我正在努力学习：D

【问题讨论】：

你可以试试这个：
您的代码看起来不错。您是否使用浏览器工具检查其是否已加载？
为什么没有实现样式？，你能不能多展示你的观点和你应用的一些基本风格来帮助别人更好地指导。
@StephenMuecke 当我使用浏览器工具检查时，我遇到了 Style.css 错误。在网络选项卡上，它说我的 css 是（阻止：其他）。在控制台选项卡下，它说不允许加载本地资源
@stom 我已经更新了问题，谢谢！

标签： css asp.net-mvc visual-studio asp.net-mvc-4 razor

【解决方案1】：

您也可以使用@Url.Content 代替css 文件的绝对路径。

<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />

或

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

【讨论】：

我试过了，还是不行！你让我尝试主要问题的那些也给我带来了错误。
好的，您的项目中使用的 IIS 端口或缺少某些设置可能存在问题。最好重现问题创建一个新的 mvc 项目并粘贴所有视图和 css 文件以再次检查。

【解决方案2】：

如果您是自己的自定义 CSS 文件，请确保将该文件添加到 App_Start 文件夹中的 BundleConfig.cs 文件中。看起来像这样..

  bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/Style.css));

在你的头部尝试替换

<head>
    @RenderSection("css", false)
</head>

与

  <head>
  @Styles.Render("~/Content/css")
  </head>

看看它会有什么不同，我们将从那里开始。

【讨论】：

嗨，我没有 BundleConfig.cs 文件，因为我在 ASP.NET5 WebApp 上运行

【解决方案3】：

我已经解决了这个错误。我将我的样式表放在“wwwroot/css”中并且它起作用了。

【讨论】：