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

Question

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;

You could try removing the brackets in your return statement. — TheDancingCode, Dec 29 '18 at 13:44
@TheDancingCode, thanks, but that doesn't have any impact. As I have mentioned, when I set for path to stream the .sass files instead of .scss, it compiles correctly, but .scss returns empty buffer — Nikola Kirincic, Dec 29 '18 at 14:38
Try moving the 'dist' directory outside the 'assets'..making the 'src' and 'dest' in different locations. I usually create 'source' and 'public' (dist) directory both on the root. — Anas Abu Farraj, Dec 29 '18 at 14:56

Den Isahac · Answer 1 · 2018-12-29T14:58:38.027

1

Could it be when you change the file extension to .scss the content is still using the old style indented syntax.

.SASS indented syntax

body
    background-color: red;

    h1
        font-size: 2.5rem;

.SCSS syntax

body {
    background-color: red;

    h1 {
        font-size: 2.5rem;
    }
}

Make sure you're using the right syntax per extension.

You can read more about Sass Indented Syntax and the difference between SASS and SCSS

edited Dec 29 '18 at 14:58

answered Dec 29 '18 at 14:54

Den Isahac

1,335
11
26

Thanks, but I use correct syntax and correct extension. As I am testing further, I tried to run manually node-sass compiling, and it looks like it is issue narrowed to node-sass. In other words, the suggestion in on answer is not an issue. Thanks anyway for effort. – Nikola Kirincic Dec 29 '18 at 14:57

score 0 · Accepted Answer · answered Dec 29 '18 at 15:14

0

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.

answered Dec 29 '18 at 15:14

Nikola Kirincic

3,651
1
24
28

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

2 Answers2