ASP.NET 核心 6 MVC：CSS 变量问题

Question

我将此 CSS 复制并粘贴到代码笔 The Code。

当我将它用于我的 ASP.NET Core 6 MVC 应用程序时，它不起作用。如果我不使用变量而只使用颜色，它就可以正常工作。有没有我错过的东西不允许 CSS 变量工作？

//the code
:root {
    --fb: rgb(16,148,244);
    --tw: rgb(93,168,221);
    --gg: rgb(234,67,53);
    --lin: rgb(10,102,194);
    --white: #ffffff;
    --fFamily: "Courier New", monospace;
}
button{
    font-family:var(--fFamily);
}
.fb-icon {
    color: var(--white);
    background-color: var(--fb);
}

    .fb-icon:hover {
        color: var(--fb);
        background-color: var(--white);
    }

.google-icon {
    color: var(--white);
    background: var(--gg);
}

    .google-icon:hover {
        color: var(--gg);
        background-color: var(--white);
    }

.twitter-icon {
    color: var(--white);
    background-color: var(--tw);
}

    .twitter-icon:hover {
        color: var(--tw);
        background-color: var(--white);
    }

.linkedin-icon {
    color: var(--white);
    background-color: var(--lin);
}

    .linkedin-icon:hover {
        color: var(--lin);
        background-color: var(--white);
    }

Answer 1

我创建了一个新的Asp.net 6 MVC 应用程序，并使用了下面的代码，似乎无论是否使用CSS 变量，代码在我这边都运行良好：

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <button class="fb-icon"> Facebook </button>
    <button class="twitter-icon">  Twitter </button>
    <button class="google-icon"> Google </button>
    <button class="linkedin-icon"> LinkedIn </button>
</div>
<style>
    :root {
        --fb: rgb(16,148,244);
        --tw: rgb(93,168,221);
        --gg: rgb(234,67,53);
        --lin: rgb(10,102,194);
        --white: #ffffff;
        --height: 35px;
        --fFamily: "Courier New", monospace;
    }
    button{
        height:var(--height);
        font-weight: 700;
        font-family:var(--fFamily);
        font-size: large;
    }
    .fb-icon {
        color: var(--white);
        background-color: var(--fb);
    }

    .fb-icon:hover
    {
        color: var(--fb);
        background-color: var(--white);
    }

    .google-icon {
        color: var(--white);
        background: var(--gg);
    }

    .google-icon:hover
    {
        color: var(--gg);
        background-color: var(--white);
    }

    .twitter-icon {
        color: var(--white);
        background-color: var(--tw);
    }

    .twitter-icon:hover
    {
        color: var(--tw);
        background-color: var(--white);
    }

    .linkedin-icon {
        color: var(--white);
        background-color: var(--lin);
    }

    .linkedin-icon:hover
    {
        color: var(--lin);
        background-color: var(--white);
    }
</style>

@*without using css variables*@
@*<style>
    button{
       height:35px;
       font-weight: 700;
       font-family:"Courier New", monospace;
       font-size: large;
    }
    .fb-icon {
        color: #ffffff;
        background-color: rgb(16,148,244);
    }

    .fb-icon:hover {
        color: rgb(16,148,244);
        background-color: #ffffff;
    }

    .google-icon {
        color: #ffffff;
        background: rgb(234,67,53);
    }

    .google-icon:hover {
        color: rgb(234,67,53);
        background-color: #ffffff;
    }

    .twitter-icon {
        color: #ffffff;
        background-color: rgb(93,168,221);
    }

    .twitter-icon:hover {
        color: rgb(93,168,221);
        background-color: #ffffff;
    }

    .linkedin-icon {
        color: #ffffff;
        background-color: rgb(10,102,194);
    }

    .linkedin-icon:hover {
        color: rgb(10,102,194);
        background-color: #ffffff;
    } 
</style>
*@

结果如下：

构建您的应用程序时，是否有任何警告或错误？无论您是否使用 _layout。在我的应用程序中，没有警告和错误，我正在使用 _layout 页面。你可以看看。

另外，您也可以将以上代码复制到您的应用程序中查看。如果还是不行，尝试创建一个新的 MVC 应用程序并在 Index 页面中测试上面的代码。

更新：

如评论中所述，我可以重现问题：如果使用 CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github。

作为临时解决方法，您可以使用不带 CSS 变量的 CSS 隔离，或者如果您想使用 CSS 变量，您可以添加 CSS样式在site.css文件中（在wwwroot/css文件夹中）或在视图页面的<style>标签中添加CSS样式。

ASP.NET 核心 6 MVC：CSS 变量问题

ASP.NET Core 6 MVC : CSS variable Issues

css

asp.net-core-mvc

asp.net-core-6.0