- Notifications
You must be signed in to change notification settings - Fork 69
Compiling themes
Zhuliyan Penkov edited this page Aug 15, 2023 · 8 revisions
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.
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.precisionsetting 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 andgulp-sass@5.x.x - the name of the package
dart-sasshas changed tosass
// 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')); });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 } } } ] } ] } };