logo标签列表

Blazor WebAssembly中的CSS隔离作用域标识不匹配。

c#cssasp.net-coreblazorblazor-webassembly
8
在 Blazor WebAssembly .NET Core 托管应用程序中，将 {PROJECT NAME}.Client 项目名称更改为 "{PROJECT NAME}.Admin"（更改客户端项目名称）后，在 {PROJECT NAME}.Admin.styles.css 文件中进行 CSS 隔离的范围标识和 DOM 中呈现的对象不同。

我的操作

我创建了一个带身份验证的 .NET Core 托管 Blazor WebAssembly 应用程序。运行正常。

然后我将 {PROJECT NAME}.Client 项目名称更改为 "{PROJECT NAME}.Admin"，并在所有出现 "Client" 的地方进行了更改。

  • 任何提到命名空间的地方
  • 项目文件夹中的客户端文件夹

然后我添加了项目引用。

当我运行该项目时... 此页面是首个页面。

问题

所有功能都正常工作。所有组件都已呈现。但是只有 Bootstrap 样式应用于 MainLayout 和 NavMenu 组件，因为它们使用 CSS 隔离。生成的隔离 CSS 文件的作用域标识与呈现给 DOM 的不同。

显示{PROJECT NAME}.Admin.styles.css 文件的图像

显示呈现的 HTML的图像

如果我手动更改作用域标识，则页面正常呈现。但当我下次运行该应用程序时，它会重置。

我只是在尝试 Blazor。因此，我期望解决此问题，而不是通过其他方法或解决方法进行样式设置。我是在线论坛的新手。对于提供不必要的信息或提供不足的信息，请原谅。请请求所需任何其他信息。

5个回答
11
删除CSS隔离文件，重新开始创建它们使得它正常工作了！但是重建解决方案或清理解决方案并没有起到作用。仍然不知道发生了什么。
你在哪里找到那些文件的？我也遇到了同样的问题。当以发布模式构建时，CSS文件的作用域会发生变化，但HTML文件不会。 - GrayTower
1
文件位于剃刀文件夹下。例如，如果页面是“NavMenu.razor”，则在同一目录中有一个名为“NavMenu.razor.css”的文件。删除该文件并创建一个新文件，然后将先前的内容粘贴到新文件中，这对我很有帮助。确保在index.html文件中将“{ProjectName}.Client.styles.css”的<link>重命名为“{ProjectName}.Admin.styles.css”（在我的情况下为“Admin”）。顺便问一句，它在调试模式下工作吗？ - TharinduSK
天啊，我也遇到了同样的问题，重新创建文件对我也有帮助！谢谢！ - ZlobnyiSerg
很难相信重新创建孤立的CSS文件就能解决这个问题，但它确实做到了。谢谢！那么是什么导致了这个问题？是“dotnet publish”命令中的一个错误吗？ - Robson William
7
对我有用的方法是删除obj和bin文件夹，此外将css文件链接重命名为{AssemblyName}.styles.css。如果ProjectName与AssemblyName不同，则将其设置为ProjectName无效。
这种方式使我不必删除和重新创建特定的css文件。 注：我正在使用带有ASP.NET 5的Blazor Server。
4

我在同一个问题上花费了很多时间。在我的情况下，只需使用项目中的“Clean”（在Visual Studio中：右键单击项目，然后选择“Clean”选项）即可。

它与另一个答案中提到的删除bin和obj文件夹具有相同的效果。

3

我曾经遇到同样的问题。重新构建解决方案对我有用。可能仅重新构建相关应用程序也足够了。

2

另一种解决方法（并非“应该已经可以正常工作”的解决方案）在“自定义范围标识符格式”下进行了说明：https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0。

基本上只需将类似以下内容添加到您的 csproj 文件中：

<ItemGroup>
  <None Update="Pages/Example.razor.css" CssScope="my-custom-scope-identifier" />
</ItemGroup>

如果您提供了一个特定的作用域标识符并确保清除了浏览器缓存，似乎会强制将作用域标识符捆绑在{AssemblyName}.styles.css中与呈现在html中相匹配。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接