Compiling themes

All kendo-themes are written in sass, using scss syntax, and you need a sass compiler to compile them. We support node-sass, dart-sass and sass-embedded.

Due to the complexity of the themes, we rely on postcss, autoprefixer and postcss-calc to properly compile them.

Using gulp

The following setup will generate ./dist/kendo-theme.css from source ./sass/kendo-theme.scss.

Please note:

• we are including /dist/all.scss, which is a flattened single-file version of the theme for faster compilation.
• prefixes will be generated for browsers having at least 10% market share.
• sassOptions.precision setting has no effect when using dart-sass.
• make sure you install gulp, gulp-sass, node-sass, dart-sass, sass-embedded, gulp-postcss, autoprefixer and postcss-calc.
• there is different setup for gulp-sass@4.x.x and gulp-sass@5.x.x
• the name of the package dart-sass has changed to sass

// assuming ./sass/kendo-theme.scss
@import "@progress/kendo-theme-default/dist/all.scss";

const gulp = require('gulp');
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");

// with gulp-sass 4
const sass = require('gulp-sass');
sass.compiler = require('node-sass'); // use node-sass
// sass.compiler = require('sass'); // use dart-sass
// sass.compiler = require('sass-embedded'); // use sass-embedded

// with gulp-sass 5
const sass = require('gulp-sass')(require('node-sass'); // use node-sass
// const sass = require('gulp-sass')(require('sass'); // use dart-sass
// const sass = require('gulp-sass')(require('sass-embedded'); // use sass-embedded


const postcssPlugins = [
    calc({
        precision: 10
    }),
    autoprefixer({
        overrideBrowserslist: [ '> 10%' ]
    })
];

const sassOptions = {
    precision: 10,
    outputStyle: 'expanded',
    includePaths: 'node_modules'
};


// Using gulp-sass 4
gulp.task('sass', function() {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass.sync(sassOptions).on('error', sass.logError))
        .pipe(postcss(postcssPlugins))
        .pipe(gulp.dest('./dist'));
});

// Using gulp-sass 5
gulp.task('sass', function() {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(postcss(postcssPlugins))
        .pipe(gulp.dest('./dist'));
});

Using webpack

Make sure you install style-loader, sass-loader, node-sass, dart-sass, sass-embedded, postcss-loader, autoprefixer and postcss-calc.

// assuming ./sass/kendo-theme.scss
@import "@progress/kendo-theme-default/dist/all.scss";

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // PostCSS
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                precision: 10,
                                plugins: [
                                    require('autoprefixer')(),
                                    require('postcss-calc')()
                                ]
                            }
                        }
                    },
                    // Compiles Sass to CSS
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('node-sass'),
                            // implementation: require('sass'),
                            // implementation: require('sass-embedded'),
                            sassOptions: {
                                precision: 10
                            }
                        }
                    }
                ]
            }
        ]
    }
};

Further reading

• Known issues
• Customizing themes
• Including themes in React projects
• Including themes in Angular projects