问题
Recently I created a new Blazor Webassembly project including Authentication (Individual User Accounts) and ASP.NET Core hosted. This generated 3 projects for me, namely: Client (Blazor Webassembly), Server (where the authentication stuff resides in, using Identityserver - looks like a ASP.NET Core Web Application template using MVC / Razor) and a Shared project.
I want all my components to be reused easily so I also created a Razor Class Library
where my (Blazor) components reside in.
In this shared library I created a few components which I also used in my Webassembly project, this all works fine.
However, I also want to use these components in the Server project. This is however not so easy. I tried the following using this link: https://medium.com/@geobourno/bringing-blazor-in-an-existing-net-core-mvc-project-d605d9f9ebe8
- I added
services.AddServerSideBlazor();
andendpoints.MapBlazorHub();
in thestartup.cs
file of the server project - I added a reference to
blazor.server.js
and<base href="/">
in my_Layout.cshtml
: - I added a reference to the shared components library
- I was not sure about the following, in the link/tutorial they either add a reference to a Blazor app (while mine is actually a Razor Class Library) or in the other case the add an
_Imports.razor
file. I chose the latter (create a_Imports.razor
file with the rightusings
in it) - Next I added a component from the shared library in an existing
.cshtml
file as following:<component type="typeof(MarketingPage)" render-mode="ServerPrerendered" />
as well as a using to the shared library in the same page:@using PCS2.ComponentsLibrary.Index
After these steps there are several issues.
The html / component is being showed but the corresponding
CSS
is not. I assumed that when I referenced my Shared component Library it would also include the css files that are inside thewwwroot
of my shared component library. I thought adding a reference to the stylesheet as following would solve the issue (but sadly it doesn't):<link href="_content/PCS2.ComponentsLibrary/css/TailwindStyles.css" rel="stylesheet" />
<link href="_content/PCS2.ComponentsLibrary/css/CustomStyles.css" rel="stylesheet" />
when inspecting it I can see the files are not being loaded:
These css files reside in the wwwroot
of my component class library:
- There are several blazor.server.js errors being generated after adding the component:
Any clue how I can get this to work?
来源:https://stackoverflow.com/questions/62203126/using-blazor-components-from-a-shared-library-in-an-asp-net-core-web-application