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

Posted 2023-03-06

【中文标题】添加到 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

【发布时间】：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"
               viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

        <path class="path" fill="#FFFFFF" stroke="#000000" stroke- 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 扩展。

【参考方案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" />