CSS and JavaScript

Each DevKit module ships its own CSS/JS, and the web clients load them through the Optimization pipeline in appsettings.json.

How the bundling works

In Blazor web clients, DevKit builds predefined bundles (minified files) and serves them as single CSS/JS assets.
This combines framework files, module files, and your client files in one output.

Main CSS bundle names used by layouts:

• cb.admin.panel.spa.{ltr|rtl}.min.css
• cb.user.panel.spa.{ltr|rtl}.min.css
• cb.website.spa.{ltr|rtl}.min.css
• cb.general.spa.{ltr|rtl}.min.css
• cb.general.nspa.{ltr|rtl}.min.css
• cb.blog.nspa.{ltr|rtl}.min.css

Main JS bundle names used by hosts/layouts:

• cb.admin.panel.spa.min.js
• cb.webapp.spa.min.js
• cb.general.spa.min.js
• cb.general.nspa.min.js
• cb.blog.nspa.min.js

spa bundles are used for Blazor SPA UI flow, and nspa bundles are used for non-SPA Razor page scenarios.

Direction-aware CSS (ltr / rtl) is selected based on localization settings.

Where to put your custom CSS

Use the client app.css files for overrides:

• AdminPanel/wwwroot/css/app.css
• WebApp/wwwroot/website/css/app.css
• WebApp/wwwroot/user-panel/css/app.css

These files are appended at the end of the related bundle, so they are the safest place to override module styles.

Simple example:

If a module renders a button with this style:

.pricing-btn {
  background-color: #4f46e5;
  color: #ffffff;
  border-radius: 8px;
}

You can override it in your client app.css:

.pricing-btn {
  background-color: #0ea5e9;
  border-radius: 999px;
}

Because your app.css is appended at the end of the bundle, your values will be applied.

Where to put your custom JavaScript

Use the client app.js files:

• AdminPanel/wwwroot/js/app.js
• WebApp/wwwroot/website/js/app.js
• WebApp/wwwroot/user-panel/js/app.js

Like CSS, these are included in the client bundle and are the recommended place for custom behavior.

Adding extra CSS/JS files (when necessary)

Preferred approach: keep customizations inside existing app.css / app.js files.

If you must split into additional files, you have two options:

1. Manually reference files in your layout/host file.
2. Add custom bundles in the Optimization section of client appsettings.json.

Example Optimization configuration for custom bundles:

"Optimization": {
  "Enabled": true,
  "EnableCaching": true,
  "EnableMemoryCache": true,
  "EnableDiskCache": false,
  "AllowEmptyBundle": true,
  "BundledCssFiles": [
    {
      "BundledFile": "/css/custom.min.css",
      "FilesToBundle": [
        "css/custom-theme.css"
      ]
    }
  ],
  "BundledJsFiles": [
    {
      "BundledFile": "/js/custom.min.js",
      "FilesToBundle": [
        "js/custom-behavior.js"
      ]
    }
  ]
}

After defining custom bundles, make sure your layout/host references your new bundled file names.