The standard project (more correctly, the group of 4 projects, I'll call "multiproject") of .NET MAUI Blazor Hybrid and Web App type:
Once operations in project creating wizard done, 4 projects will be created:
- Most pages, layouts and other GUI components will be defined in Question260197-1.Shared project.
- In Question260197-1/wwwroot/index.html of Question260197-1 project, the styles from Shared accessed as
<link rel="stylesheet" href="_content/Question260197-1.Shared/app.css" />- In Components/App.razor of Question260197-1.Web project, the styles from Shared accessed by same way:
<link rel="stylesheet" href="_content/Question260197-1.Shared/app.css" />I can see three files in Question260197-1.Shared/obj/Debug/net10.0/scopedcss:
What if I don't need the scoped styles?According to documentation,
Disable CSS isolation
To opt out of how Blazor publishes and loads scoped files at runtime, use the DisableScopedCssBundling property. When using this property, it means other tools or processes are responsible for taking the isolated CSS files from the obj directory and publishing and loading them at runtime:
<PropertyGroup><DisableScopedCssBundling>true</DisableScopedCssBundling></PropertyGroup>
But I am not sure how to do it in .NET MAUI Blazor Hybrid and Web App multiproject. If I'll add above XML to .csproj file of Question260197-1.Shared, the following building error will occur:
1>Microsoft.NET.Sdk.StaticWebAssets.ScopedCss.targets(251,3): Error : System.InvalidOperationException: No file exists for the asset at either location 'D:\CrossPlatformDevelopment\Questions\Question260197-1\Question260197-1\obj\Debug\net10.0-maccatalyst\maccatalyst-x64\scopedcss\bundle\Question260197-1.styles.css' or 'D:\CrossPlatformDevelopment\Questions\Question260197-1\Question260197-1\obj\Debug\net10.0-maccatalyst\maccatalyst-x64\scopedcss\bundle\Question260197-1.styles.css'.at Microsoft.AspNetCore.StaticWebAssets.Tasks.StaticWebAsset.ResolveFile(String identity, String originalItemSpec)at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.ResolveFileDetails(String originalItemSpec, String identity)at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.Execute()1>Microsoft.NET.Sdk.StaticWebAssets.ScopedCss.targets(251,3): Error : System.InvalidOperationException: No file exists for the asset at either location 'D:\CrossPlatformDevelopment\Questions\Question260197-1\Question260197-1\obj\Debug\net10.0-ios\iossimulator-x64\scopedcss\bundle\Question260197-1.styles.css' or 'D:\CrossPlatformDevelopment\Questions\Question260197-1\Question260197-1\obj\Debug\net10.0-ios\iossimulator-x64\scopedcss\bundle\Question260197-1.styles.css'.at Microsoft.AspNetCore.StaticWebAssets.Tasks.StaticWebAsset.ResolveFile(String identity, String originalItemSpec)at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.ResolveFileDetails(String originalItemSpec, String identity)at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.Execute()
Below Question260197-1.Shared/obj/Debug/net10.0/scopedcss now I can see only Layout/MainLayout.razor.rz.scp.css:
Now sure why MainLayout.razor.rz.scp.css is still there, because scoped styles has been fully disabled, but I need to know how to share the stylesheets now.
If I'll add above XML to .csproj file of Question260197-1, the building will be fine but when the application start the required styles will not be found:
/Question260197-1.styles.css:1 Failed to load resource: net::ERR_ADDRESS_UNREACHABLE
In Windows/UWP platform case, above message will display in the devtools which available in .MAUI + WebView case:
Above error will not disappear if to add
<PropertyGroup><DisableScopedCssBundling>true</DisableScopedCssBundling></PropertyGroup>to both Question260197-1 and Question260197-1.Shared.
Looks like the working with non-scoped styles requires the specific approach in .NET MAUI Blazor Hybrid and Web App. Please explain it.