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.