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

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

0 голосов
/ 29 декабря 2018

Я установил 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, он выдает ошибку, поэтому 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;

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

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

0 голосов
/ 29 декабря 2018

Может быть, если вы измените расширение файла на .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

...