添加到 ASP.NET Core 项目中的 site.css 文件时，CSS 不起作用。但是当作为内联添加时有效答案

【问题标题】：CSS not working when added to site.css file in ASP.NET Core project. But works when added as inline添加到 ASP.NET Core 项目中的 site.css 文件时，CSS 不起作用。但是当作为内联添加时有效
【发布时间】：2017-08-18 18:06:01
【问题描述】：

我正在一个ASP.NET Core 项目上测试svg animation 示例（取自here 的Live Example 部分）。

图像显示正常。当我将以下css inline 添加到特定的view 时，动画有效，但当我将相同的css 添加到站点时，动画不起作用。 css 文件（默认位于myProject\wwwroot\cs\site.css）。为什么？

视图 [在我将相关的 css 移动到视图内后动画可以工作]

<div>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

        <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
            s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
            C46.039,146.545,53.039,128.545,66.039,133.545z" />  
    </svg>
</div>
@section css{
    <style>
        .path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear alternate infinite;
        }

        @@keyframes dash {
            from {
                stroke-dashoffset: 1000;
            }

            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
}

myProject\wwwroot\css\site.css 文件的快照：[将上述 css 添加到以下 site.css 文件的末尾时，动画不起作用。

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
...
...
}

/*I added for svg animation test*/
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

【问题讨论】：

可能 UseStatic 中间件未将 .cs 文件作为静态 css 提供服务。使用正确的 css 扩展。

标签： css animation svg asp.net-core visual-studio-2017

【解决方案1】：

遇到了类似的问题，解决方案是强制加载css（浏览器中的crtl+F5）。我的浏览器已经更新了旧版本，IIS Express 不会强制从源代码加载它。

【讨论】：

我们如何强制它从源加载它？
@ChristopheChenel 打开 chrome 开发工具，在重新加载页面按钮上按住鼠标左键 and you see these options -> 按“清空缓存和硬重新加载”，这样它就会刷新缓存的样式。

【解决方案2】：

在startup.cs中添加app.UseStaticFiles(); --> 配置方法

如果你这样做并且再次工作，则将版本添加到你的 css 链接，如下所示：

<link rel="stylesheet" href="/css/site.css?v=enter here version number" />

例如：

<link rel="stylesheet" href="/css/site.css?v=101" />

更改 css 文件时更新版本号

你可以将它用于 js 文件。

如果你这样做，用户不需要按 ctrl+f5

【讨论】：

【解决方案3】：

检查 _Layout.cshtml 文件中的链接。它将默认设置为 CSS 的 site.min.css 版本，而不是 site.css。

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

将其更改为您解压后的完整 css 文件 site.css

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

【讨论】：

【解决方案4】：

我的 Identity _Layout.cshtml (/Pages/Shared/_Layout.cshtml) 正在从 Identity (~/Identity/css/site.css) 引用 site.css，这显然没有得到脚手架。

我的解决方案是在 _Laout.cshtml 文件中引用位于项目 (wwwroot/css/site.css) 中的 site.css。

旧：

<link rel="stylesheet" href="~/Identity/css/site.css" />

新：

<link rel="stylesheet" href="/css/site.css" />

【讨论】：

【解决方案5】：

这可以是任何 Nam，但请检查以下内容 1) 文件名应该是 site.css(CSS 文件) 而不是 site.cs(C# 文件)。您确实在使用 CSS 文件，不是吗？ 2) 如果您的文件命名正确，您应该检查浏览器是否没有加载您的 CSS 文件的缓存版本。

【讨论】：

这只是帖子中的一个错字（感谢您指出这一点）。我已经更正了应该是site.css 的错字。但是在我从浏览器中清除缓存并单击Clean Solution 后问题仍然存在

【解决方案6】：

我遇到了同样的问题，我尝试了 ~/css/main 但没用，我写了

<link rel="stylesheet" href="../wwwroot/css/main.css"/>

它对我有用。

【讨论】：

【解决方案7】：

_layout.cshtml 中没有 asp-append-version = "true" 也可能是不呈现 site.css 的原因。如果您忘记了，请尝试添加。

--不带asp-append-version="true"

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css"/>

--使用 asp-append-version="true"

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
 <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

【讨论】：