DevExtreme - Custom Style Bundles (v19.2)

If you require optimized deployment sizes for DevExtreme applications, here is some great news: With our most recent release (v19.2), you can build custom CSS bundles for the widgets used by your application. Alternatively, widget-specific LESS files are available for import. This means you need to only deploy those styles used within your application (instead of the complete set included by default in previous releases).

CSS Bundles

Using the option –widgets for the build-theme command of DevExtreme CLI, you can specify a list of widgets to include when you build a bundle. For example, the following command line creates a bundle for the theme Material Blue Light, including only styles for the Data Grid and the Menu widgets (note that the command appears wrapped):

1
2

> devextreme build-theme --base-theme=material.blue.light \
    --version=19.2.3 --widgets=datagrid,menu

It is also possible to specify the widgets parameter as a metadata option. Starting with v19.2, this approach is used by the DevExtreme application templates for Angular, Vue and React.

We will soon add a feature to the visual ThemeBuilder tool that allows selection of individual widgets.

LESS Imports

We now deliver LESS format files in the less folder of the installed devextreme package. You can use these files as they are, or import them in your own LESS files to create custom bundles. We don’t recommend that you modify our LESS files. Instead, please import them and override rules as required.

In addition to the theme-specific bundles in less/bundles, there are also per-component files in less/widgets. You can import these files individually to optimize your bundle. For example, here’s how to import only the Button style for the theme material.blue.light:

1

@import 'devextreme/less/widgets/material.blue.light/dx.button.less';

Supported Widgets

As you see in the example above, widget names can be specified in lower case for ease of use. All HTML widgets are supported (please see this link about the different styling approaches for HTML- and SVG-based widgets).

Please note that we don’t supply LESS files for dx.common.css. You should import this file directly, like this:

1

@import (css) 'devextreme/dist/css/dx.common.css';

Of course, an HTML style tag or an environment specific import mechanism (such as an entry in the styles section in angular.json) works as well.

Test It Today

Install the latest version of devextreme-cli (v1.1.8 at the time of writing):

1

> npm install -g devextreme-cli

Build a theme including specific widgets (note that the command appears wrapped):

1
2

> devextreme build-theme --base-theme=material.blue.light \
    --version=19.2.3 --widgets=datagrid,menu

Depending on your options, bundle size will vary. Here are some sample sizes based on the Material Blue Light theme and v19.2.3:

Free DevExpress Products - Get Your Copy Today