Gulp issue - TypeError: sass is not a function

Question

I have changed my Gulp file over to use Dart SASS with gulp-sass after node-sass has been deprecated.

However, it appears I am struggling to actually get it working.

I have set up my gulp file function to use it exactly like the NPM page describes. The only difference is that I am using it in a series rather than directly as demonstrated.

function scss () {
    return src(`${__dirname}/.../*.scss`)
        .pipe(sass({outputStyle : 'expanded', cache : '/tmp/sass-cache'}).on('error', sass.logError))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(dest('System/cache'));
}

With my series call being:

exports.default = series(deleteDirs, createDirs, scss, build, compile, preview);

When I run gulp I am getting:

Starting 'scss'...
'scss' errored after 8.19 ms
TypeError: sass is not a function
    at scss (/.../gulpfile.js:98:15)

node version: 10.13.0 npm version: 6.4.1 nvm version: 0.35.3 (I did nvm use 10 before this)

I did use an older version of npm as I saw a post earlier stating that newer versions can have issues with these things.

Answer 1

You need to change the sass compiler to use dart-sass instead of the default node-sass like this:

const sass = require('gulp-sass');
sass.compiler = require('sass');

Or for version 5 of gulp-sass:

const sass = require('gulp-sass')(require('sass'));