Blazored/Toast

[Question] No styles

adria-arquimbau opened this issue · 1 comments

Please be sure to check the readme file before raising an issue.

Hi!

Seems like I made all the steps regarding configuration and the styles doesn't load correctly.

image

here is my index.html file:

`

<title>EventsManager</title>
An unhandled error has occurred. Reload 🗙
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> <script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.0.2/dist/web-components.min.js"></script> `

Regular styles in the application work correctly.

All steps regarding config, builder.Services.AddBlazoredToast(); imports: @using Blazored.Toast @using Blazored.Toast.Services

And MainLayout:
`




<main>
    <div class="top-row px-4 auth">
        <LoginDisplay />
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>

`

Maybe a conflict within the index.html file?

Thanks

This is almost certainly going to be tied to the CSS bundling. There's a note about this in the description, here. Looks like your index.html file is missing the <link/> element that is including your bundled styles.

There's a more detailed description on bundling from Microsoft, here.

Also, note that if you're including the BlazoredToasts in a razor class library of your own (i.e. a component project that's not your main Client csproj project, you need to have at least one component that has an isolated css file associated with it in order to trigger bundling (i.e. MyComponent.razor.css) to include the BlazoredToast stylesheet in the bundled stylesheet of your own RCL.