我创建了一个Cart.razor.css文件，它是Cart.razor目录中的一个子文件。据我所知，这就是Razor中的作用域CSS文件。我已经阅读了文档here，据我所知，CSS（Cart.razor.css）文件应该自动包含在父文件（Cart. razor）中，并且可以从父文件（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
正如你所看到的按钮显然不是红色或无边框的。
我的问题是：
- 我是否需要以某种方式将CSS表包含在剃刀文件中？
- 这是否与我使用的是Rider而不是Visual Studio有关？
3条答案
按热度按时间v1l68za41#
如果您已在head区段中加入样式表参照，请检查index.html（适用于Webassembly）或_Host.cshtml（适用于Server）：
此文件将与您所有的CSS隔离文件一起 * 组合 *。
之后，我测试了你的代码，结果是：
另外两个可能需要检查的问题：
1.如果您已经升级了项目，请检查您的Project.Client.csproj并从
<PropertyGroup>中删除行<RazorLangVersion>3.0</RazorLangVersion>1.检查
ASPNETCORE_ENVIRONMENT系统变量是否设置为Developmentffscu2ro2#
我发现浏览器正在缓存旧的css，而没有注意到新的作用域css文件所引起的变化。在浏览器中使用Ctrl F5重新加载加载了预期的css。
kzmpq1sx3#
根据Nicola的回答，如果您只有一个WebAssembly项目，则需要将
<AppName>.styles.css导入到index.html中。