mixin bg-svg dont work

[Folo4ka]

исходные данные (все конфиги по дефолту ничего нет трогал поcле tars init):

[ TARS ]: TARS-CLI version: "1.12.2"
[ TARS ]: TARS version in current project: "1.14.0"

Конфиг:

"svg": {
        "active": true,
        "workflow": "sprite",
        "symbolsConfig": {
            "loadingType": "inject",
            "usePolyfillForExternalSymbols": true,
            "pathToExternalSymbolsFile": ""
        }
    },

кладу свг иконку back.svg в markup/static/img/svg в markup/static/scss/GUI.scss использую @include bg-svg($back);

при сборке, например, tars dev пишет:

markup\static\scss\GUI.scss
Error: no mixin named bg-svg
        on line 5 of markup/static/scss/GUI.scss
        from line 13 of main.scss
>>     @include bg-svg($back);

[artem-malko]

Привет. А есть пример проекта чтобы склонить?

[Folo4ka]

вот пример, все по дефолту кроме стиля в gui.scss и самой иконки https://github.com/Folo4ka/tars-example

[artem-malko]

А при инициализации не было проблем? Предлагаю просто заинитить проект в отдельной папке и скопировать в него папку markup из текущего. Только надо с заменой файлов сделать. В сборке вот тут: https://github.com/Folo4ka/tars-example не хватает файлов scss-ных. Кажется, при ините что-то пошло не так и они просто не сгенерировались.

[Folo4ka]

Ошибок при ините не было.

это и есть то что после инита получилось, добавлен только стиль и иконка, если я сделаю инит, будет тоже самое, я инитил раза 3 проект с нуля. Скажи хоть каких конкретно файлов не хватает?

[artem-malko]

В папке sprites-scss sprite_96.scss

@mixin sprite-position($sprite) {
    $sprite-offset-x: nth($sprite, 3);
    $sprite-offset-y: nth($sprite, 4);
    background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
    $sprite-image: nth($sprite, 9);
    background-image: url(%=static=%png-sprite/96dpi/#{$sprite-image});
}

@mixin sprite-mixin-template($sprite) {
    @include sprite-image($sprite);
    @include sprite-position($sprite);
    width: nth($sprite, 5);
    height: nth($sprite, 6);
}

@mixin bg($sprite, $repeat: no-repeat) {
    @include sprite-mixin-template($sprite);
    $sprite-total-width: nth($sprite, 7);
    $sprite-total-height: nth($sprite, 8);
    background-size: $sprite-total-width, $sprite-total-height;
    background-repeat: $repeat;
}

sprite-ie.scss

@mixin bg($sprite, $repeat: no-repeat) {
    @include sprite-mixin-template($sprite);
    background-repeat: $repeat;
}

svg-fallback-sprite.scss

@mixin svg-sprite-position($svg-sprite) {
    $svg-sprite-offset-x: nth($svg-sprite, 3);
    $svg-sprite-offset-y: nth($svg-sprite, 4);
    background-position: $svg-sprite-offset-x  $svg-sprite-offset-y;
}

@mixin svg-sprite-image($svg-sprite) {
    $svg-sprite-image: nth($svg-sprite, 9);
    background-image: url(%=static=%rastered-svg-sprite/#{$svg-sprite-image});
}

@mixin bg-svg($svg-sprite, $repeat: no-repeat) {
    @include svg-sprite-image($svg-sprite);
    @include svg-sprite-position($svg-sprite);
    width: nth($svg-sprite, 5);
    height: nth($svg-sprite, 6);
    background-repeat: $repeat;
}

svg-sprite.scss

@mixin svg-sprite-position($svg-sprite) {
    $svg-sprite-offset-x: nth($svg-sprite, 1);
    $svg-sprite-offset-y: nth($svg-sprite, 2);
    background-position: $svg-sprite-offset-x  $svg-sprite-offset-y;
}

@mixin bg-svg($svg-sprite, $repeat: no-repeat) {
    background-image: url('%=static=%svg-sprite/{{imgName}}');
    @include svg-sprite-position($svg-sprite);
    width: nth($svg-sprite, 3);
    height: nth($svg-sprite, 4);
    background-repeat: $repeat;
}

[Folo4ka]

ты репу не качал чтоли? если билд запустить эти все файлы появляются и для иконки back в них код генериуется, но пишет командная строка что не знает такого миксина все равно.

у тебя в гитигноре же прописаны эти файлы что ты написал ))

**/sprite_96.*
**/svg-fallback-sprite.*
**/svg-sprite.*

скачай репу, npm i, tars dev и сам посмотри что все ок, но ругается на миксин все равно

[artem-malko]

Попробуй обновить make-sprite-for-svg.js

'use strict';

const gulp = tars.packages.gulp;
const plumber = tars.packages.plumber;
const notifier = tars.helpers.notifier;
const skipTaskWithEmptyPipe = tars.helpers.skipTaskWithEmptyPipe;
const stringHelper = tars.helpers.stringHelper;

const preprocName = tars.cssPreproc.name;
const preprocExtension = tars.cssPreproc.mainExt;
const staticFolderName = tars.config.fs.staticFolderName;
const imagesFolderPath = `${tars.config.devPath}${staticFolderName}/${tars.config.fs.imagesFolderName}`;
const preprocFoldePath = `./markup/${staticFolderName}/${preprocName}`;
const actionsOnSpriteTaskSkipping = require(`${tars.root}/tasks/css/helpers/actions-on-sprite-task-skipping`);

/**
 * Make sprite for svg and styles for this sprite
 * Return pipe with styles for sprite
 */
module.exports = () => {
    gulp.task('css:make-sprite-for-svg', (done) => {
        const errorText = 'An error occurred while making sprite for svg.';

        function actionsOnTaskSkipping() {
            return actionsOnSpriteTaskSkipping({
                blankFilePath: `${preprocFoldePath}/sprites-${preprocName}/svg-sprite.${preprocExtension}`,
                fileWithMixinsPath: `${tars.root}/tasks/css/helpers/sprite-mixins/${preprocName}-svg-sprite-mixins.${preprocExtension}`,
                errorText,
                done,
            });
        }

        if (tars.config.svg.active && tars.config.svg.workflow === 'sprite') {
            gulp.src(`${imagesFolderPath}/minified-svg/*.svg`)
                .pipe(
                    plumber({
                        errorHandler(error) {
                            notifier.error(errorText, error);
                        },
                    }),
                )
                .pipe(skipTaskWithEmptyPipe('css:make-sprite-for-svg', actionsOnTaskSkipping))
                .pipe(
                    tars.require('gulp-svg-spritesheet')(
                        Object.assign(
                            {},
                            {
                                cssPathSvg: '',
                                templateSrc: `${preprocFoldePath}/sprite-generator-templates/${preprocName}.svg-sprite.mustache`,
                                templateDest: `${preprocFoldePath}/sprites-${preprocName}/svg-sprite.${preprocExtension}`,
                                imgName: `sprite${tars.options.build.hash}.svg`,
                            },
                            tars.pluginsConfig['gulp-svg-spritesheet'],
                        ),
                    ),
                )
                .pipe(gulp.dest(`${imagesFolderPath}/svg-sprite/sprite${tars.options.build.hash}.svg`))
                .pipe(
                    notifier.success(
                        `${stringHelper.capitalizeFirstLetter(preprocName)} for svg-sprite is ready.`,
                    ),
                )
                .end(() => {
                    done();
                });
        } else {
            tars.skipTaskLog('css:make-sprite-for-svg', 'SVG is not used or you prefer symbols workflow');
        }
        actionsOnTaskSkipping();
    });
};

Ну и в GUI.scss так миксин юзать нельзя, нужно в какой-то селектор обренуть:

.class {
  @bg-svg($back);
}

[Folo4ka]

понял в чем причина: запись как в документации и у меня в репе не работает:

.class {
    @include bg-svg($back);
} 

а твоя без инклюда работает:

.class {
  @bg-svg($back);
}

обнови тогда доку TARS https://github.com/tars/tars/blob/master/docs/ru/svg-processing.md на запись без инклюда, потому что с ним как видишь не работает, хотя зачем было убирать поддержку инклюда, непонятно.

[artem-malko]

воу, странно, по идее с инклудом тоже должно все работать. Завтра еще гляну

[Folo4ka]

и еще прикол.

хоть с записью @bg-svg($filename) сборка в dev режиме tars dev и заработала. Но теперь не работает билд, например tars build -m, пишет ошибку во время билда:

[17:51:49] Starting 'css:compress-css'...
[17:51:49] gulp-notify: [TARS notification]
An error occurred while compressing css.
Look in the console for details.

Error details:

Cannot read property '0' of undefined
_______________

[17:51:49] The following tasks did not complete: default, build, main:build, <anonymous>, <parallel>, css:compress-css
[17:51:49] Did you forget to signal async completion?

Надо точно смотреть в чем дело.

[artem-malko]

Выполни в папке с проектом следующую команду:

tars update-project -s https://github.com/tars/tars/archive/fix-sprites-bugs.zip

Ну и попробуй собрать проект. Не забудь про @include bg-svg. Именно с include будет работать.

[Folo4ka]

при tars update-project -s https://github.com/tars/tars/archive/fix-sprites-bugs.zip пишет что последняя версия у меня уже и так есть (и видимо ниче не качает и не обновляет, наверное)

tars dev и tars build так же после этого пишут что не знают что за миксин @include bg-svg

[artem-malko]

Попробуй

tars update-project -s https://github.com/tars/tars/archive/fix-sprites-bugs.zip --force

[Folo4ka]

теперь все работает, спасибо большое! тестируй, пожалуйста, с иконками новые версии ))) у меня каждая новая версия не работала практически никогда, я сидел на 3х летней давности все это время. Спасибо еще раз.

[artem-malko]

Так тестировал) Проблем не выявил тогда. Завтра выпущу эту версию

[artem-malko]

fix в мастере