The Kendo UI theme-tasks
package is a utility library for developing and building @progress/kendo-theme-*
packages.
- Install the package as a dev dependency:
npm install @progress/kendo-theme-tasks --save-dev
- Install the preferred sass compiler(
node-sass
orsass
):
npm install sass
npm install node-sass
- If using npm version < 7 make sure that peer dependencies are installed:
npm install postcss postcss-calc autoprefixer
The package allows you to compile Kendo themes from SCSS or JSON through the kendoSassBuild
and kendoJsonBuild
functions.
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:
- Import the theme:
@import "~@progress/kendo-theme-default/dist/all.scss";
- 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;
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:
-
Utilize one of the existing theme swatches or create a new one by following the schema.
-
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;