Razor Class Library Adding reference to css, js to main projeto master

Asked 18/12, 2019 at 0:49 Answered 4/1, 2020 at 21:1

Is there a way to when creating a Razor class library and in there you have js, css it will automatically add the reference links in _Host.cshtml from Blazor app?

making it short I do not want to add a reference for my Css/js from my razor class lib to another blazor app Host (layout)

Gustavogustavus answered 18/12, 2019 at 0:49 Comment(1)

sounds like you're finding it hard to let go of js? – Breskin 18/12, 2019 at 3:49

Put your dependencies in library's wwwroot folder.

In your _Host.cshtml add css and scripts links to your libraries contents :

<!DOCTYPE html>
<html>
<head>
...
    <link href="_content/Aguacongas.AwsComponents/styles.css" rel="stylesheet" />
</head>
<body>
    <app>
    </app>
    <script src="_content/Aguacongas.AwsServices/main.bundle.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

In this sample I add css from Aguacongas.AwsComponents library and scripts from Aguacongas.AwsServices library.

For Blazor WASM do the same in your index.html or any other html host page.

Tact answered 18/12, 2019 at 7:45 Comment(6)

But that was my question... I dont want to add manually it to host page, I would like a way to ONLY reference my class lib and some how it add the reference to the files – Scrivener 19/12, 2019 at 11:46

@DouglasSimão This is not yet available, and IMO will not, 'cause you should have a way to choose which contents you would like to add – Tact 19/12, 2019 at 13:0

what does IMO mean? – Scrivener 19/12, 2019 at 16:53

IMO = In my opinion – Tact 19/12, 2019 at 18:14

@DouglasSimão did you ever get the answer to this? Like you, I feel we should NOT have to add a reference to css in the host app and that it should be automatically included when you add a reference to the component library. If you found out how to do that, I would greatly appreciate knowing the solution. – Solidarity 12/12, 2022 at 11:11

@JohnKears, wondering did you end up finding the solution to this elsewhere? I found this solution which might be helpful to you. But you can see in the solution's comments I'm asking for a cleaner way to do this. – Neoarsphenamine 16/2, 2023 at 17:11

IF I am understanding the question correctly and fwiw (for what its worth) I have to agree that having to manually copy an RCL dependency, like a JS module, to the host project in order to, say, instantiate an object ostensibly provided by the RCL breaks the idea of a self-contained UI library. It's not.

For example, if the RCL provides say a "Pager" JS object and the Host JS can't do

let pager = new Pager()

The RCL then can't be packaged for NuGet installation without scripting the install (and I'm not even sure that it can be done there) and worse, arbitrarily stuffing a JS file into the host project's unknown file structure.

Supposedly static resources can be embedded into an RCL but in the case of JS, there doesn't seem to be any way to reference said resource directly from the Host's own scripts.

IMO that greatly reduces the usefulness of the RCL over say View Components or Partial Views, so....

if anyone knows how to accomplish this I'd be grateful for a post :-)

Shellashellac answered 4/1, 2020 at 21:1 Comment(0)

Recommended topics

Hot tags