我最近将一个宠物项目从 Blazor .NET 3.1 迁移到 .NET 5.0,并尝试切换到使用 css 隔离。
我创建了一个 scss 文件(使用网络编译器扩展编译为 css 文件),其前缀与我的组件相同:
我已将生成的 css 包含在我的 index.html 文件中:
<link href="FinNodeWASM.Client.styles.css" rel="stylesheet">
Dotnet 正确生成 css 并按预期附加范围标识符属性:
但是,当我查看生成的 HTML 时,我没有看到预期的分数标识符属性:
升级到 .NET 5 后,我忘记将引用包含在我的 Blazor Server 项目中的 _Host.cshtml 中。感谢您在上面的问题中指出:)
包括参考修复了问题:
<link href="AssemblyName.styles.css" rel="stylesheet">
当我的
ASPNETCORE_ENVIRONMENT
设置为“开发”以外的其他内容时,我遇到了此问题。这似乎是一个已知问题,要解决此问题,您需要在 webBuilder.UseStaticWebAssets();
中设置 Program.cs
:
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.UseSerilog()
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStaticWebAssets();
webBuilder.UseStartup<Startup>();
});
问题:https://github.com/dotnet/aspnetcore/issues/28911
解决方案:https://github.com/dotnet/aspnetcore/issues/28174#issuecomment-734239932
我在升级一个简单的项目时遇到了同样的问题。我比较了新创建的 Blazor csproj 文件并删除了 RuntimeIdentifier,RazorLangVersion 为我修复了它。
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
*** DELETE THIS LINE *** -> <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
*** DELETE THIS LINE *** -> <RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup Condition="'$(TargetFramework)' == 'net5.0' ">
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-*" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-*" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.0-*" />
<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="5.0.0-*" />
<PackageReference Include="System.Net.Http.Json" Version="5.0.0-*" />
</ItemGroup>
</Project>
使用最新的 Blazor Server 模板,将以下行添加到 Program.cs:
var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseWebRoot("wwwroot").UseStaticWebAssets(); // The fix.
我不知道为什么会这样,但其他解决方案不适合 Blazor Server 模板,所以我通过反复试验进行了调整。
就我而言,我有一个包含可重用组件的引用项目,因此在调查之后,我意识到需要捆绑作用域 Css。我所做的就是清理并重建我的主项目,并将新的 CSS 添加到捆绑包中。如果您使用共享项目,请确保在主项目 wwwroot 内的 index.html 中添加以下 Css 引用。 [BlazorWASM]
<link href="MainProjectName.styles.css" rel="stylesheet" />
<link href="_content/ReferenceProjectNamespace.styles.css" />
我必须删除 Client.csproj 中的以下行:
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>