How to compile less files correctly

4 posts, 0 answers
  1. Atasoy
    Atasoy avatar
    2 posts
    Member since:
    Feb 2016

    Posted 21 Jul Link to this post

    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?

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Atasoy
    Atasoy avatar
    2 posts
    Member since:
    Feb 2016

    Posted 29 Jul in reply to Alex Gyoshev Link to this post

    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"

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready