【问题标题】:ASP.NET MVC 6 Not Rendering CSS Style SheetASP.NET MVC 6 不呈现 CSS 样式表
【发布时间】:2016-01-24 02:43:07
【问题描述】:

我正在尝试将一个 css 文件添加到我的布局文件中,该文件位于 Shared 文件夹中。当我运行 Web 应用程序时,我的 CSS 未呈现(不在解决方案中的 CSS(即:Bootstrap CDN)呈现。

我尝试使用这些方法链接 CSS,但它们不起作用:

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

<link rel="stylesheet" href="~/Assets/Scripts/StyleSheet.css" type="text/css"/> 

我的应用程序的文件结构是:

我应该在 Startup.cs 文件中添加什么内容以便它可以读取 css 文件吗?

谢谢。

编辑:样式表出现错误 404

我在 Mozilla Firefox 上运行该应用程序,并使用内置的开发者控制台查看发生了什么。观察网络选项卡后,它告诉我在尝试检索样式表时发生错误 404。这真的很奇怪。

【问题讨论】:

  • 我在 Mozilla Firefox 上检查了开发者控制台,发现在尝试检索样式表时出现错误 404(见上图)。

标签: asp.net asp.net-mvc


【解决方案1】:

您的布局中的其他更改是否正确显示?例如,如果您添加一个随机文本字符串,它会显示出来吗?至于 startup.cs,您应该在 Configure 部分中有 app.UseStaticFiles();

再次注意,我在 _layout 中的 CSS 如下所示:

<environment names="Development">
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

我觉得不需要破解,但是没试过不破解...

【讨论】:

  • 嗨。我的布局页面上的文本确实出现在我的其他页面上。我从引导 css 工作中使用的类(文件托管在 MaxCDN 上)。我检查了我的 Startup.cs 文件,在 Configure 方法中,我确实有 app.UseStaticFiles()。
  • 首先,检查生成的 html 以查看它为 css url 显示的内容 - 它不应包含“~”。从页面中获取 url 并尝试使用 css url 中指定的相对路径在浏览器中转到该 URL。如果一切看起来都不错,请使用诸如 firebug 或 chrome 开发人员工具之类的浏览器工具来确定请求的内容以及服务器的响应方式。
  • 我已经用浏览器检查了这个 - 它说找不到样式表。这很奇怪,因为我确信样式表在正确的位置。
【解决方案2】:

参考 StackOverflow 上发布的类似问题:ASP.NET 5 MVC6 Custom CSS & Javascript placing convention

我将 CSS 文件放在 wwwroot 目录的一个 css 文件夹中。

然后,在我的 Layout 文件中,我更改了 href 属性:

<link rel="stylesheet" href="@Url.Content("../css/style.css")"/>

最后,我确定我的 Configure 方法中有 app.UseStaticFiles():

public void Configure(IApplicationBuilder app)
    {
        app.UseStaticFiles();

        app.UseMvc(config => config.MapRoute(
            name: "Default",
            template: "{Controller}/{action}/{id?}",
            defaults: new {controller = "Home", action = "Index"}               
            ));
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-26
    • 2023-03-03
    • 2017-12-25
    • 2013-07-30
    • 1970-01-01
    • 2020-09-06
    相关资源
    最近更新 更多