Mapping kendo theme scss files to components/modules

[esp]

According to https://www.telerik.com/kendo-angular-ui/components/styling/ we should be only importing the scss that is required by the components we use. For instance:

// Import only the PanelBar and Grid styles.
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

 

How do we know which styles are used by which components? If we have imported the charts module for instance, which styles would need to be imported?

[Dimiter Topalov]

Hi,

The Kendo UI SASS themes are shared between the different Kendo UI suites (for Angular, jQuery, React, and Vue), and typically all components/widgets have a dedicated folder, containing the SCSS files required for the given component:

https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss

Complex components often use other components and have dependencies on them, for example - the Grid. In such cases the dedicated Grid SCSS imports the SCSS for all other components it uses internally, e.g.:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/grid/_index.scss

The Charts are somewhat of an exception due to the fact that the Charts and Gauges all have specific SVG or Canvas - based rendering, thus there is no separate SCSS file for all different types of Charts and Gauges, but instead they are grouped under the DataViz folder:

https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss/dataviz

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[esp]

I see, makes sense. Appreciate your help.