How to fix More than one scoped css files were found for the razor component for Razor Component

user_713847 0
Viewed 211

This is what my project looks like: enter image description here

I have just css file for my razor component, but when I try to build it I get the More than one scoped css files were found for the razor component 'Pages\Randomizer\RandomizeNamesAdvanced.razor'. Each razor component must have at most a single associated scoped css file. error.

I copied pasted the css file from another component's css file if that makes any difference. But I have checked both the css file's build action is set to Content. How can I fix this?

blazor-webassembly blazor razor css
1 Answers

Update (Solution 1)

I faced the problem again after I renamed a .razor file. The problem is in the .csproj file. Make sure you have your .css file name with a remove property.

enter image description here

  <ItemGroup>
    <None Remove="Pages\Randomizer\NameCard.razor.css" />
    <None Remove="Pages\Randomizer\RandomizeNamesMedium.razor.css" />    <== this line was missing
    <None Remove="Pages\Randomizer\RandomizeNamesBasic.razor.css" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="Pages\Randomizer\NameCard.razor.css" />
    <Content Include="Pages\Randomizer\RandomizeNamesMedium.razor.css" />   <== this is the file I renamed
    <Content Include="Pages\Randomizer\RandomizeNamesBasic.razor.css" />
  </ItemGroup>

If this still doesn't fix the issue you can follow solution 2 which is basically re-adding the file.

Solution 2

Not sure what was causing the issue, but I ended up just deleting the file and adding it back again. Would still like to know if someone knows a better solution without deleting the file.

Note: after adding the style sheet the build action was set to None, had to change it to Content manually.

user_7138470
Related