.NET 8 Blazor项目中Razor组件无法识别.razor.css文件

问题描述 #

在.NET 8 Blazor项目中，MyComponent.razor组件无法应用同名同目录下MyComponent.razor.css定义的样式。已尝试以下方案但未解决：

• 确认.razor.css文件与.razor文件同名且在同一目录；
• 在Visual Studio中清理并重建解决方案；
• 在index.html中手动添加样式引用：<link rel="stylesheet" href="MyComponent.razor.css" />

相关代码 #

MyComponentBase.razor #

@inherits MyComponentBase

@foreach (var item in Products) {
    <div class="col-md-3 mb-2">
        <a href="/ProductDetails/@item.Id">
            <div class="card">
                <img class="img-thumbnail img-hover" src="@item.ImageURL">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        @item.Name
                    </h5>
                    <p class="card-text">
                        <b>@item.Price.ToString("C")</b>
                    </p>
                </div>
            </div>
        </a>
    </div>
}

MyComponentBase.razor.css #

a {
    text-decoration: none;
}

    a:hover .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: box-shadow 0.3s ease-in-out;
    }

.card {
    transition: box-shadow 0.3s ease-in-out;
    overflow: hidden;
}

a:hover .img-hover {
    transform: scale(1.07);
    transition: 0.5s ease-in-out;
}

.img-hover {
    transition: 0.5s ease-in-out;
}

可能原因及解决建议 #

1. 组件文件名与实际使用组件不匹配 #

问题描述中提到的是MyComponent.razor，但提供的代码是MyComponentBase.razor及对应css文件。Blazor组件隔离样式严格绑定组件文件名，只有直接使用<MyComponentBase />时，MyComponentBase.razor.css才会生效；若实际使用的是<MyComponent />，需为MyComponent.razor创建对应的MyComponent.razor.css文件。

2. 手动添加样式引用引发冲突 #

Blazor组件隔离机制会自动编译并注入.razor.css文件，无需手动在index.html中添加引用。手动添加的引用路径大概率错误（组件样式会被编译为带哈希值的文件），反而干扰框架自动注入逻辑，请删除index.html中对应的<link>标签。

3. 组件继承导致样式无法传递 #

若MyComponent.razor继承自MyComponentBase，父组件的MyComponentBase.razor.css默认不会作用于子组件，可通过以下方式解决：

• 将通用样式迁移至全局css文件（如wwwroot/css/app.css）；
• 在子组件css中使用::deep选择器穿透隔离，例如：

  ::deep .card {
      /* 继承父组件样式逻辑 */
  }
  

• 为MyComponent.razor单独创建对应的.razor.css文件。

4. 项目配置异常 #

检查项目.csproj文件，确保.razor.css文件被正确包含且生成操作设置为ComponentCss：

<ItemGroup>
  <ComponentCss Include="**/*.razor.css" />
</ItemGroup>

若存在<Content Remove="MyComponentBase.razor.css" />这类排除配置，需删除。

5. 浏览器缓存问题 #

开发环境中浏览器可能缓存旧样式文件，可强制刷新页面（Ctrl+F5）或在浏览器开发者工具Network面板勾选「Disable cache」后重新加载。

内容的提问来源于stack exchange，提问作者Noir