Venkat Renuka Prasad Venkat Renuka Prasad - 5 months ago 24
Javascript Question

gulp-sass with Gulp 4.0 and gulp-cli 4.0 not piping css

I am working with the latest version of Node, Gulp and gulp-cli. My gulpfile.js is exactly like this. Trying out gulp to teach myself.

var gulp = require('gulp'),
sass = require('gulp-sass');


gulp.task('default', function(){
return gulp.src("./styles/_site.scss")
.pipe(sass())
.pipe(gulp.dest("./public"));
});


When I run gulp, I get nothing at the destination. No error is thrown.

I removed the pipe to sass plugin and ran the task, which then is expected to simply copy the file to the destination), and it did.

Then I used gulp-plumber on the stream.

var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber');


gulp.task('default', function(){
try {

var bla = sass();

var blah = gulp.src("./styles/_site.scss")
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass())
.pipe(gulp.dest("./public"));
} catch(ex) {
console.log(ex);
var blah = gulp.src("./styles/_site.scss")
.pipe(gulp.dest("./public"));
} finally {
return blah;
}
});


I use vs code (again, the latest version;) to debug..

This I debugged to look at sass()

The task ran with no errors caught, even with the plumber. I am lost here and would really appreciate some suggestions.

PS: I tried out gulp-less to see if it could convert from *.less to *.css and it did. Had no issues there.

Answer

Rename _site.scss to site.scss.

gulp-sass quietly skips all files starting with an underscore. This is because as a convention, partials (i.e. files that you want to import but should not compile to a separate CSS output) must have their name starting with an underscore.

Since you intend to output a CSS file for this input SCSS file, you should not have it marked as a partial, thus you should not have a leading underscore.