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

Question

我正在 ASP.NET Core 元素上测试 svg animation 示例(取自 here 的 Live Example 部分) .

图像显示正常。当我将以下 css inline 添加到特定的 view 时，animation 有效，但当我将相同的 css 添加到 site.css 文件(默认位于 myProject\wwwroot\cs\site.css)。为什么？

View [在我将相关的 css 移动到 View 中后动画工作]

<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(在浏览器中按 ctrl+F5)。我的浏览器已检查旧版本，IIS Express 不会强制从源加载它。