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

Я установил [email protected], [email protected] и последнюю версию 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;

css sass node-sass gulp gulp-sass
person Nikola Kirincic    schedule 29.12.2018    source источник
comment
Вы можете попробовать удалить скобки в своем операторе возврата.   -  person TheDancingCode    schedule 29.12.2018
comment
@TheDancingCode, спасибо, но это не имеет никакого значения. Как я уже упоминал, когда я устанавливаю путь для потоковой передачи файлов .sass вместо .scss, он компилируется правильно, но .scss возвращает пустой буфер   -  person Nikola Kirincic    schedule 29.12.2018
comment
Попробуйте переместить каталог 'dist' за пределы 'assets' ... расположив 'src' и 'dest' в разных местах. Обычно я создаю каталог «source» и «public» (dist) как в корне.   -  person Shakespear    schedule 29.12.2018
comment
@Shakespear, я пробовал это раньше, возникает такая же проблема   -  person Nikola Kirincic    schedule 29.12.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

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

body
    background-color: red;

    h1
        font-size: 2.5rem;

.SCSS синтаксис

body {
    background-color: red;

    h1 {
        font-size: 2.5rem;
    }
}

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

Вы можете узнать больше о синтаксисе с отступом Sass и различиях между SASS и SCSS

person Den Isahac    schedule 29.12.2018
comment
Спасибо, но я использую правильный синтаксис и правильное расширение. По мере того, как я тестирую дальше, я попытался запустить компиляцию node-sass вручную, и похоже, что проблема сужена до node-sass. Другими словами, предложение в ответе не является проблемой. В любом случае спасибо за усилия. - person Nikola Kirincic; 29.12.2018

arrow_upward
0
arrow_downward

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

person Nikola Kirincic    schedule 29.12.2018