gulp-sass generates empty css

[totszwai]

I had been using this in my package.json to convert scss to css and had been working fine.

"node-sass --importer node_modules/node-sass-package-importer/dist/cli.js ./src/styles/styles.scss ./dist/styles.css"

I'm trying to switch over to use gulp-sass so that is cleaner. However it doesn't work and doesn't throw any errors... it just prints out an empty css file.

const sass = require('gulp-sass');
gulp.task('sass:components', function() {
  return gulp.src('./src/styles/styles.scss')
    .pipe(debug())
  //.pipe(sass.sync({
    .pipe(sass({
      importer: require('node-sass-package-importer')
    }))
    .pipe(gulp.dest('dist'))
});

There is no error what so ever, is this a gulp-sass issue or node-sass issue?

[14:29:34] Using gulpfile ~/projects/gulpfile.js
[14:29:34] Starting 'sass:components'...
[14:29:34] gulp-debug: src/styles/styles.scss
[14:29:34] gulp-debug: 1 item
[14:29:34] Finished 'sass:components' after 39 ms

Using the following:

"gulp": "^4.0.2",
"gulp-debug": "^4.0.0",
"gulp-sass": "^4.1.0",
"node-sass": "^4.14.1",
"node-sass-package-importer": "^5.3.2",

[xzyfer]

The node-sass-package-importer documentation states the usage as follows

    .pipe(sass({
      importer: require('node-sass-package-importer')(),
    }))