如何修复Razor组件中存在多个作用域CSS文件的问题。

Question

这是我的项目外观： 我只有一个用于 Razor 组件的 CSS 文件，但是当我尝试构建它时，出现了错误：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.。我从另一个组件的 CSS 文件中复制粘贴了该 CSS 文件，如果这有任何区别的话。但我已经检查过这两个 CSS 文件的构建操作都被设置为 Content。我该如何解决这个问题？

- SZT

Answer 1

更新（解决方案1）

我在将一个.razor文件重命名后再次遇到了这个问题。问题出现在.csproj文件中，请确保你的.css文件名带有一个remove属性。

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

如果这样还是解决不了问题，您可以尝试第二种解决方案，即重新添加文件。

---

解决方案2

不确定什么原因导致了这个问题，但我最终只是删除了该文件，然后再添加回来。仍然希望知道是否有更好的解决方案而不需要删除文件。

注意：在添加样式表之后，构建操作被设置为“无”，必须手动更改为“内容”。

- SZT

---

你改变了编译/中间目标吗？或者移动了文件位置，也许在旧路径中存在一个副本但不在项目中？ - Shuryno

我有一个个人规则来避免这样的问题。永远不要在VS内复制剃刀代码。在VS外部完成它。我在文件资源管理器中完成它。然后，VS会正确地捕捉到更改和重命名，并且不会让自己陷入困境！ - MrC aka Shaun Curtis

我通过彻底删除ItemGroup属性来解决了这个问题。 - Bob

我也移动了一个文件。重命名没有起作用。删除和重新创建也没有起作用。我的问题的原因是我通过创建一个新的剃刀组件，然后将其重命名为mycomponent.razor.css来创建样式表。有效的方法是创建一个新的样式表并将其命名为mycomponent.razor.css。似乎让编译器困惑的是尝试通过重命名文件扩展名将组件转换为样式表。 - undefined