Blazor UI: Managing Global Scripts & Styles
You can add your JavaScript and CSS files from your modules or applications to the Blazor global assets system. All the JavaScript and CSS files will be added to the global.js
and global.css
files. You can access these files via the following URL in a Blazor WASM project:
- https://localhost/global.js
- https://localhost/global.css
Add JavaScript and CSS to the global assets system in the module
Your module project solution will have two related Blazor projects:
MyModule.Blazor
:This project includes the JavaScript/CSS files required for your Blazor components. TheMyApp.Blazor.Client (Blazor WASM)
project will reference this project.MyModule.Blazor.WebAssembly.Bundling
:This project is used to add your JavaScript/CSS files to the Blazor global resources. TheMyModule.Blazor (ASP.NET Core)
project will reference this project.
You need to define JavaScript and CSS contributor classes in the MyModule.Blazor.WebAssembly.Bundling
project to add the files to the global assets system.
Please use
BlazorWebAssemblyStandardBundles.Scripts.Global
andBlazorWebAssemblyStandardBundles.Styles.Global
for the bundle name.
public class MyModuleBundleScriptContributor : BundleContributor
{
public override void ConfigureBundle(BundleConfigurationContext context)
{
context.Files.AddIfNotContains("_content/MyModule.Blazor/libs/myscript.js");
}
}
public class MyModuleBundleStyleContributor : BundleContributor
{
public override void ConfigureBundle(BundleConfigurationContext context)
{
context.Files.AddIfNotContains("_content/MyModule.Blazor/libs/mystyle.css");
}
}
[DependsOn(
typeof(AbpAspNetCoreComponentsWebAssemblyThemingBundlingModule)
)]
public class MyBlazorWebAssemblyBundlingModule : AbpModule
{
public override void ConfigureServices(ServiceConfigurationContext context)
{
Configure<AbpBundlingOptions>(options =>
{
// Add script bundle
options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global)
.AddContributors(typeof(MyModuleBundleScriptContributor));
// Add style bundle
options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global)
.AddContributors(typeof(MyModuleBundleStyleContributor));
});
}
}
Add JavaScript and CSS to the global assets system in the application
This is similar to the module. You need to define JavaScript and CSS contributor classes in the MyApp.Blazor.Client
project to add the files to the global assets system.
AbpBundlingGlobalAssetsOptions
You can configure the JavaScript and CSS file names in the GlobalAssets
property of the AbpBundlingOptions
class. The default values are global.js
and global.css
.