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

Question

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

图像显示正常。当我添加以下css 内嵌到一个特定view的动画作品，但不动画不工作时，我添加相同css的文件的site.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;
    }
}

Answer 1

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

Answer 2

添加
app.UseStaticFiles();

在 startup.cs --> 配置方法

Answer 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" />

Answer 4

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