Blazor 找不到或忽略作用域 CSS
我创建了一个 Cart.razor.css 文件，它是 Cart.razor 目录中的子文件。据我了解，这就是 Razor 中所谓的作用域 CSS 文件。我已阅读此处的文档，据我所知，CSS (Cart.razor.css) 文件应该自动包含在内，并且可以在父 (Cart.razor) 文件中使用。但在我的例子中却并非如此。
这里的问题是，无论我做什么。包含在作用域 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;
}
正如您所看到的，该按钮显然不是红色或无边框的。
我的问题是：
- 我是否需要以某种方式将 CSS 表包含在 razor 文件中？
- 这是否与我使用 Rider 而不是 Visual Studio 有关？
如果您已在head部分添加样式表引用，请检查您的 index.html（对于 Webassemble）或 _Host.cshtml（对于服务器）：
<head>
...
<link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>
该文件将与您所有的 CSS 隔离文件组成。
之后，我测试了你的代码，结果是：
另外两个可能需要检查的问题：
- 如果您已升级项目，请检查您的Project.Client.csproj并
<RazorLangVersion>3.0</RazorLangVersion>从<PropertyGroup> - 检查
ASPNETCORE_ENVIRONMENT系统变量是否设置为Development
- 这个技巧对我有用，但我需要将不带“Client”的 <applicationName> 项目名称添加到 WebAssembly 版本的 index.html 标头部分。 (2认同)
| 归档时间： |
|
| 查看次数： |
5614 次 |
| 最近记录： |