Blazor 找不到或忽略范围 CSS

Question

我创建了一个 Cart.razor.css 文件，它是目录 Cart.razor 中的子文件。据我了解，这就是 Razor 中所谓的范围 CSS 文件。我已阅读文档 here，据我所知，CSS (Cart.razor.css) 文件应自动包含并可在父 (Cart.razor) 文件中使用.然而在我的例子中它不是。

Here is an image of the file directory

这里的问题是无论我做什么。 CSS 范围内的 CSS 文件将不会被执行。

这里是一些 Cart.razor 文件，其中显示了使用自定义 CSS 的尝试。注意"btn-delete".

<button class="btn-delete" @onclick="@(() => DeleteItem(item))">

这是 Cart.razor.css 文件的一部分。

.btn-delete{
    background: none;
    border: none;
    padding: 0px;
    color: red;
    font-size: 12px;
}

.btn-delete:hover{
    text-decoration: underline;
}

Here is an image of the result

如您所见，按钮显然不是红色或无边框的。

我的问题是：

我是否需要以某种方式在 razor 文件中包含 CSS sheet？
这与我没有使用 Rider 有关系吗 Visual Studio?

Answer 1

如果您在 head 部分添加了样式表参考，请检查您的 index.html（对于 Webassembly）或 _Host.cshtml（对于服务器）：

<head>
...
    <link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>

此文件将与您所有的 CSS 隔离文件合成。

之后，我测试了你的代码，结果是：

另外两个可能需要检查的问题：

如果您升级了项目，请检查您的 Project.Client.csproj 并从 <PropertyGroup>[=34= 中删除行 <RazorLangVersion>3.0</RazorLangVersion> ]
检查ASPNETCORE_ENVIRONMENT系统变量是否设置为Development

Blazor 找不到或忽略范围 CSS

Blazor cannot find or is ignoring scoped CSS

css

razor

blazor