Search code examples
csssassgulpgulp-sassnode-sass

Gulp 4 compilling scss creates empty css file, but sass compiles correctly


I have installed gulp@4.0.0, and gulp-sass@4.0.2, and latest gulp-cli in Windows

When I set path for src() to lookup for 'assets/css/src/**/*.sass' files to create a stream, it compiles sass into css correctly.

But when I try to do so with 'assets/css/src/**/*.scss' files, it creates corresponding .css file, but empty one.

When I put intentionally erroneous code in .scss file, it throws an error, so gulp-sass actually does go through .scss file, but doesn't output the buffer into css code.

Even when I run node-sass manually to compile the script, it produces same issue, so it might be related more to node-sass as compiler.

note: Syntax for both .scss and .sass are correct, and correct extensions are being used.

This is my gulpfile.js:

var gulp = require("gulp");
var sass = require("gulp-sass");


let paths = {
    css : {
        src  : 'assets/css/src/**/*.scss',
        dest : 'assets/css/dist'           
    }
};


function style() { 

    return (
        gulp
            .src(paths.css.src)
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(gulp.dest(paths.css.dest))
    );
}


// $ gulp style
exports.style = style;

Solution

  • Resolved: It turns out that only style block that had some property was commented, thus causing .scss file return empty output, and sass won't compile empty blocks.