gulp sass not writing to destination directory

Question

I've started using the gulp-sass 5. It's behaviour seems different from gulp-sass 4, requiring different configuration.

I've managed to figure out how to get it reading scss files. But I can't figure out how to get it to write them.

With the following config, no files are written to the './css' directory.

  function buildStyles() {
        return gulp.src('./sass/**.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest('./css'));
    };

How can I get sass to actually write the files?

Answer 1

You should define a task for compile sass files See here : Gulp Sass

gulpfile.js

 const gulp = require('gulp'); const sass = require('gulp-sass'); const del = require('del'); gulp.task('styles', () => { return gulp.src('sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css/')); }); gulp.task('clean', () => { return del([ 'css/main.css', ]); }); gulp.task('default', gulp.series(['clean', 'styles']));

Answer 2

I had the same issue, By looking inside gulp-sass code, I figured out it's because the source file name starts with _

if (path.basename(file.path).startsWith('_')) {
  callback();
  return;
}
// ^ inside gulp-sass core js file

I'm not sure what purpose this serves but it seems like it was made intentionally to ignore files starting with _ , renaming the files fixed it for me