Blazor Web assembly：CSS：未应用主机变量

Question

我正在研究 Blazor Web assembly 组件的布局。（=胖浏览器客户端，无服务器渲染）

布局如下所示并按预期工作：

.grid 
{
    min-height: 100vh;
    min-width: 100vw;
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: grid;
    grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
    grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
    /*Blazor Special*/
    margin: -8px;
}

.gridCellLogo 
{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
    background-color: red;
}

<div class="grid">
    <div class="gridCellLogo">
        @*Put your component here*@
    </div>
</div>

但是，如果我使用 CSS 变量，它们不会被应用。看看 --somecolor

:host
{
    --somecolor: green;
}

.grid {
    min-height: 100vh;
    min-width: 100vw;
    height: 100vh;
    width: 100vw;
    background-color: var(--somecolor);
    display: grid;
    grid-template-rows: 10px 5vh calc(90vh - 20px) 5vh 10px;
    grid-template-columns: 10px 3vw calc(94vw - 20px) 3vw 10px;
    /*Blazor Special*/
    margin: -8px;
}

我的问题：

是我的 CSS 错误还是 Blazor Web assembly 尚未准备好使用 CSS 变量？

Answer 1

您是否使用 Blazor CSS 隔离？例如，MyComponent.razor.css？如果是这样，CSS 隔离不支持伪类、变量或任何以单个冒号开头的 CSS :。

您需要在非编译的 CSS 文件中声明这些变量，例如下面app.css的wwwroot/css.