Compile Theme - plumbing issues - please help

[smchargue]

I wish I knew what everyone else but me seems to know, but so far, I've been completely unsuccessful in trying to get a basic compilation of the Kendo Bootstrap Theme following the example files (kendo-theme.scss, gulpfile.js) in the wiki here. I've tried both dart-sass and node.sass.

I get the following error when running gulp sass

C:\kendo.theme>gulp sass
[13:39:31] Using gulpfile C:\kendo.theme\gulpfile.js
[13:39:31] Starting 'sass'...
[13:39:31] 'sass' errored after 13 ms
[13:39:31] TypeError: sass.sync is not a function
    at C:\kendo.theme\gulpfile.js:49:20
    at taskWrapper (C:\kendo.theme\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (node:domain:421:15)
    at runBound (node:domain:432:12)
    at asyncRunner (C:\kendo.theme\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

I'm running node.js v16.15.0 and my package.json file contains

{
  "dependencies": {
    "@progress/kendo-theme-bootstrap": "^5.4.1",
    "gulp": "^4.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "dart-sass": "^1.25.0",
    "gulp-postcss": "^9.0.1",
    "gulp-sass": "^5.1.0",
    "node-sass": "^7.0.1",
    "postcss-calc": "^8.2.4",
    "sass": "^1.51.0"
  }
}

I'm using the gulpfile.js from the Wiki indicated above, but here it is for reference:

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

// An importer that redirects relative URLs starting with "~" to
// `node_modules`.
function packageImporter(url) {

    // If the doesn't start with ~, return it as is.
    if (!url.startsWith('~')) {
        return null;
    }

    const nodeModules = path.resolve('./node_modules');

    // Create a new url to the correct location
    const file = path.resolve(
        nodeModules,
        url.slice(1)
    );

    return { file };
}

// 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',
    importer: [packageImporter]
};
gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass.sync(sassOptions).on('error', sass.logError))
        .pipe(postcss(postcssPlugins))
        .pipe(gulp.dest('./dist'));
});```

[joneff]

The article was stale and was written against gulp-sass@4. We've updated it to include instructions for gulp-sass@5.