How to compile less files correctly

[Atasoy]

Hi there,

i just couldn't figure it out wich *.less files (and in what order) i have to import to get a correct css file.

My current approach is the following:

 

@theme: 'material';
@theme: 'office365';
@theme: 'metro';

@asset-path: "http://kendo.cdn.telerik.com/2016.2.714/styles/";
@theme-folder: e(`@{theme}.charAt(0).toUpperCase() + @{theme}.slice(1)`);

@import "kendo/web/kendo.@{theme}.less";
@image-folder: "@{asset-path}@{theme-folder}";
@import "kendo/web/kendo.common.core.less";
@import (optional) "kendo/web/kendo.common-@{theme}.core.less";
@import "kendo/web/kendo.common.less";
@import (optional) "kendo/web/kendo.common-@{theme}.less";
@import "kendo/web/kendo.@{theme}.mobile.less";

// kendo core files fix
@font-face {
font-family: "Kendo UI";
src: url("@{asset-path}images/kendoui.woff?v=1.1") format("woff"),
url("@{asset-path}images/kendoui.ttf?v=1.1") format("truetype"),
url("@{asset-path}images/kendoui.svg#kendoui") format("svg");
}

There are no errors, but some style just dont fit.

Bonus Question: If I want to use the type-custom.less from the theme builder, where did i have to add this file?

[Alex Gyoshev]

Hello Atasoy,

The documentation of custom themes describes the approach of creating them. The easiest way to create them is to copy one of our theme files and customize its colors.

Regards,
Alex Gyoshev
Telerik by Progress

 

 

[Atasoy]

Thanks for not reading my question.

I found a solution working for me (as far as i see):

 

@kendo-path: "../../../resources/libs/kendo-ui/styles/";

@theme: 'metro';
@theme: 'office365';
@theme: 'material';

@asset-path: "http://kendo.cdn.telerik.com/2016.2.714/styles/";
@theme-folder: e(`@{theme}.charAt(0).toUpperCase() + @{theme}.slice(1)`);

@import "@{kendo-path}web/kendo.common.less";
@import (optional) "@{kendo-path}web/kendo.common-@{theme}.less";
@import "@{kendo-path}web/kendo.@{theme}.less";
@image-folder: "@{asset-path}@{theme-folder}";
@import "@{kendo-path}web/type-@{theme}.less";

// kendo core files fix
@font-face {
font-family: "Kendo UI";
src: url("@{asset-path}images/kendoui.woff?v=1.1") format("woff"),
url("@{asset-path}images/kendoui.ttf?v=1.1") format("truetype"),
url("@{asset-path}images/kendoui.svg#kendoui") format("svg");
}

@import "my_cutom_less_files.less"

[Alex Gyoshev]

Hello Atasoy,

The documentation describes both how to create custom themes and how to use the ThemeBuilder output. What is the problem that is solved by the pasted code? There seem to be overrides (redefinition of variables), as well as includes of more than one common file, which does not make sense.The kendo.theme.less file should include its own type-theme file, so no need to import the latter, too. All of this is described in the documentation help topic that I recommended reading.

Regards,
Alex Gyoshev
Telerik by Progress