How to create sprites in Gulp using gulp.spritesmith?

Question

Fonts

Good day! Tell me how to fix the error when generating sprites in Gulp.
The task itself for sprites:

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/')); // путь, куда сохраняем стили
});

Task for converting SCSS to 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'));

});

I took the template for sprite.scss from here and did not change anything in it.

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

*{
    margin: 0;
    padding: 0;
}

body{
    font-size: 16px;
}

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

First, I generate a sprite, then I collect and convert css, but it gives an error
prntscr.com/hpnuwq
Writes that I need to run through the postcss-scss parser, how to do this? but without this file with styles, the sprite is converted normally, why is this happening?

Answer 1

Select all layers with a similar font and replace it.

Screenshot

Answer 2

In the CSS processing task, put an autoprefixer after the sass job