Razor Component Not Recognizing .razor.css File in Blazor Project

I’m facing an issue with my Blazor project (using .Net 8) where the .razor.css file is not being recognized by the corresponding Razor component.
Issue: The styles defined in MyComponent.razor.css are not being applied to MyComponent.razor. I have tried the following steps to resolve the issue:

1.Ensured that the .razor.css file has the same name as the .razor file and is in the same folder.

2.Cleaned and rebuilt the solution in Visual Studio.

3.Verified the inclusion of the styles in index.html by adding:
<link rel="stylesheet" href="MyComponent.razor.css" />
Despite these efforts, the styles are still not being applied. Any suggestions on what might be causing this issue and how to resolve it would be greatly appreciated.

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;
}

You need to sign in to view this answers

Related Post