При компиляции в Gulp 4 scss создает пустой файл css, но sass компилируется правильно

Question

Я установил gulp@4.0.0, gulp-sass@4.0.2 и последнюю версию gulp-cli в Windows

Когда я устанавливаю путь для src() для поиска 'assets/css/src/**/*.sass' файлы для создания потока, он правильно компилирует sass в css.

Но когда я пытаюсь сделать это с 'assets/css/src/**/*.scss' файлы, он создает соответствующий файл.css, но пустой.

Когда я помещаю намеренно ошибочный код в .scss file, он выдает ошибку, поэтому gulp-sass действительно проходит через файл.scss, но не выводит буфер в код css.

Даже когда я запускаю node-sass вручную для компиляции скрипта, он вызывает ту же проблему, поэтому он может быть связан с node-sass как компилятор.

примечание: синтаксис для.scss и.sass правильный, и используются правильные расширения.

Это мой 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;

Answer 1

Решено: Оказывается, что был прокомментирован только блок стиля, у которого было какое-то свойство, в результате чего файл.scss вернул пустой вывод, и sass не скомпилирует пустые блоки.

Answer 2

Может ли это быть, когда вы измените расширение файла на .scss содержание все еще использует синтаксис с отступом старого стиля.

Синтаксис с отступом .SASS

body
    background-color: red;

    h1
        font-size: 2.5rem;

Синтаксис .SCSS

body {
    background-color: red;

    h1 {
        font-size: 2.5rem;
    }
}

Убедитесь, что вы используете правильный синтаксис для каждого расширения.

Вы можете прочитать больше о Sass Indented Syntax и разнице между SASS и SCSS.