Compiling Themes
All kendo-themes are written in sass, using scss syntax, and you need a sass compiler to compile them. We support both node-sass and dart-sass.
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 include
/dist/all.scss, which is a flattened single-file version of the theme for faster compilation. - Prefixes will be generated for browsers with at least 10% market share.
sassOptions.precisionsetting has no effect when using dart-sass.- Make sure you install gulp-sass, node-sass, dart-sass, gulp-postcss, autoprefixer, postcss-calc, and fibers.
// assuming ./sass/kendo-theme.scss
@import "../node_modules/@progress/kendo-theme-default/dist/all.scss";const gulp = require('gulp');
// use node-sass
const sass = require('gulp-sass')(require('node-sass'));
// Use dart-sass
// const sass = require('gulp-sass')(require('dart-sass'));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const postcssPlugins = [
calc({
precision: 10
}),
autoprefixer({
overrideBrowserslist: [ '> 10%' ]
})
];
const sassOptions = {
precision: 10,
outputStyle: 'expanded',
};
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 webpack
Make sure you install style-loader, sass-loader, node-sass, dart-sass, 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: {
precision: 10,
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
// implementation: require('dart-sass'),
sassOptions: {
precision: 10,
// fiber: require('fibers')
}
}
}
]
}
]
}
};Known Issues
Here is a list of common issues with kendo-themes and how to solve them.
Compilation is slow
Since day one of the themes, we wanted the themes to "automagically" load the styles needed for a given component. In other words, if you need just the grid, the themes will load all the input components, because they are needed for the editing functionality. That leads to multiple and repetitive child imports, hence a hit in performance when compiling.
If you need the entire theme, instead of importing /scss/all.scss, you can import /dist/all.scss. That's a single-file version of the theme and compiles much much faster.
If you need to import multiple components, you can take a look at our theme task and the sassimporter helper, which implements a sort of caching mechanism to avoid repetitive file processing.
There is not much that can be done about dart-sass compiler, before we switch to sass module system.
Invalid nested calc expressions
Due the complexity of the themes, nested or otherwise invalid calc expressions could appear in the generated css. To handle this, use postcss-calc in your gulp or webpack workflow.
