telerik / kendo-theme-tasks

Kendo Theme Tasks
4 stars 2 forks source link

Kendo UI Theme Tasks

The Kendo UI theme-tasks package is a utility library for developing and building @progress/kendo-theme-* packages.

Installation

  1. Install the package as a dev dependency:
    npm install @progress/kendo-theme-tasks --save-dev
  1. Install the preferred sass compiler(node-sass or sass):
    npm install sass
    npm install node-sass
  1. If using npm version < 7 make sure that peer dependencies are installed:
    npm install postcss postcss-calc autoprefixer

Usage

The package allows you to compile Kendo themes from SCSS or JSON through the kendoSassBuild and kendoJsonBuild functions.

Building from SCSS

A Kendo theme can be compiled to CSS from SCSS source with predefined configuration options (package importer, postcss, postcss-calc and autoprefixer) through the kendoSassBuild() method:

  1. Import the theme:
    @import "~@progress/kendo-theme-default/dist/all.scss";
  1. Compile to CSS:
    const { kendoSassBuild } = require('@progress/kendo-theme-tasks/src/build/kendo-build');

    function buildStyles(cb) {
        kendoSassBuild({
            file: './sass/styles.scss',
            output: {
                path: './wwwroot/css'
            },
            sassOptions: {
                compiler: 'node-sass',
                minify: true
            }
        });

        cb();
    }

    exports.buildStyles = buildStyles;

Building from JSON

A Kendo theme or a custom theme swatch can be compiled to CSS from JSON schema with predefined configuration options (package importer, postcss, postcss-calc and autoprefixer) through the kendoJsonBuild() method:

  1. Utilize one of the existing theme swatches or create a new one by following the schema.

  2. Compile the JSON schema to CSS:

    const { kendoJsonBuild } = require('@progress/kendo-theme-tasks/src/build/kendo-build');

    function buildStyles(cb) {
        kendoJsonBuild({
            file: 'scss/theme.json',
            output: {
                path: 'dist/'
            },
            sassOptions: {
                compiler: 'node-sass',
                minify: true
            }
        });

        cb();
    }

    exports.build = buildStyles;