Как создать спрайты на Gulp с помощью gulp.spritesmith?

Question

[Вадим]

Доброго времени суток! Подкажите как исправить ошибку при генерации спрайтов в Gulp.

Сама таска для спрайтов:

gulp.task('sprite', function () {
    var spriteData =
        gulp.src('./src/sprite/*') // путь, откуда берем картинки для спрайта
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: 'sprite.scss',
                cssFormat: 'scss',
                algorithm: 'binary-tree',
                cssTemplate: 'scss.template.mustache',
                imgPath: "../sprite/sprite.png",
                cssVarMap: function (sprite) {
                    sprite.name = sprite.name
                }
            }));

    spriteData.img.pipe(gulp.dest('./build/sprite/')); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest('./src/scss/')); // путь, куда сохраняем стили
});

Таска для конвертации SCSS в CSS:

gulp.task('css', function () {
    return gulp.src(components.scss)
        .pipe(autoprefixer({
            browsers: ['last 8 versions'],
            cascade: false
        }))
        .pipe(sass().on('error', sass.logError))
        .pipe(concat("style.css"))
        .pipe(minify_css())
        .pipe(gulp.dest('build/css'));

});

Шаблон для sprite.scss взял от сюда в нем ничего не менял.

@import "sprite.scss";
@import "helpers.scss";

*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 16px;
}

.sprite{
    @include sprite($vk);
}

Сначала выполняю генерацию спрайта, потом собираю и конвертирую css, но выдает ошибку
prntscr.com/hpnuwq

Пишет что надо прогнать через postcss-scss parser, как это сделать? но без этого файла со стилями спрайта конвертируется нормально, почему так происходит ?

Answer 1

[monochromer]

В задаче обработки CSS autoprefixer поставьте после работы sass

Comments

[Вадим]

Благодарю за помощь!