Compiling Themes

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

Copy Codeconst gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const Fiber = require('fibers');

// Use node sass
sass.compiler = require('node-sass');
// Use dart-sass
// sass.compiler = require('dart-sass');

const postcssPlugins = [
    calc({
        precision: 10
    }),
    autoprefixer({
        overrideBrowserslist: [ '> 10%' ]
    })
];
const sassOptions = {
    precision: 10,
    outputStyle: 'expanded',
    fiber: Fiber
};
gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass.sync(sassOptions).on('error', sass.logError))
        .pipe(postcss(postcssPlugins))
        .pipe(gulp.dest('./dist'));
});

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

Copy Codemodule.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')
                            }
                        }
                    }
                ]
            }
        ]
    }
};