Blazor UI: Managing Global Scripts & Styles

Some modules may require additional styles or scripts that need to be referenced in index.html file. It's not easy to find and update these types of references in Blazor apps. ABP offers a simple, powerful, and modular way to manage global style and scripts in Blazor apps.

To update script & style references without worrying about dependencies, ordering, etc in a project, you can use the bundle command.

You can also add custom styles and scripts and let ABP manage them for you. In your Blazor project, you can create a class implementing IBundleContributor interface.

IBundleContributor interface contains two methods.

  • AddScripts(...)
  • AddStyles(...)

Both methods get BundleContext as a parameter. You can add scripts and styles to the BundleContext and run bundle command. Bundle command detects custom styles and scripts with module dependencies and updates index.html file.

Example Usage

namespace MyProject.Blazor
{
    public class MyProjectBundleContributor : IBundleContributor
    {
        public void AddScripts(BundleContext context)
        {
            context.Add("site.js");
        }

        public void AddStyles(BundleContext context)
        {
            context.Add("main.css");
            context.Add("custom-styles.css");
        }
    }
}

There is a BundleContributor class implementing IBundleContributor interface coming by default with the startup templates. So, most of the time, you don't need to add it manually.

Bundle command adds style and script references individually. Bundling and minification support will be added to incoming releases.

Contributors


Last updated: November 19, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More