Шаблон HBS с grunt-dr-svg-sprites

Question

Я использую grunt для генерации sprite SVG-изображения (с резервным копированием PNG) из разделенных файлов SVG и (-ов) css-файла для сгенерированных значков. Для этого процесса я использую grunt-dr-svg-sprites, а шаблон использует синтаксис Handlebars.

Идеи структуры, что я хотел бы достичь такой:

@mixin prefix-filename { 
    width: X; 
    height: X; 
    background-position: X X; 
    @include background(); 
} 
. 
. 
. 
@mixin prefix-filename { 
    width: X; 
    height: X; 
    background-position: X X; 
    @include background(); 
} 

@mixin background() { 
    background-size: X X; 
    background-repeat: no-repeat; 
    background-image: url("sprite-with-its-path.png"); 

    .svg & { 
    background-image: url("sprite-with-its-path.svg"); 
    } 
} 

Но потому, что я не очень знаком с синтаксисом шаблона Рулей шаблона, что я создал разорван и не Работа. Это выглядит следующим образом:

{{~#sizes~}} 
{{~#items~}} 

@mixin {{className}} { 
    width: {{unit width ../../../config/cssUnit ../../../config/cssBaseFontSize}}; 
    height: {{unit height ../../../config/cssUnit ../../../config/cssBaseFontSize}}; 
    background-position: {{unit x ../../config/cssUnit ../../config/cssBaseFontSize -1}} {{unit y ../../config/cssUnit ../../config/cssBaseFontSize -1}}; 
    @include background(); 
} 

{{/items~}} 

@mixin background() {{prefix items ""}} { 
    background-size: {{unit width ../../config/cssUnit ../../config/cssBaseFontSize}} {{unit height ../../config/cssUnit ../../config/cssBaseFontSize}}; 
    background-repeat: no-repeat; 
    background-image: url("{{url pngPath ../../cssPath}}"); 

{{~/sizes~}} 

    .svg & { 
    background-image: url("{{url ../svgPath ../cssPath}}"); 
    } 
} 

Когда я пытаюсь построить спрайт, я получаю сообщение об ошибке:

Building SVG sprites... 
Fatal error: Arguments to path.resolve must be strings 

Но в любом случае {{className}} на подмешать имя также неправильно, если он содержащий "." (точка) в начале, а также миксин background() не должен содержать ни одного имени элемента.

В опциях я определил следующие атрибуты: spriteElementPath, spritePath, cssPath, prefix, layout, cssUnit, template

Если я использую официальный файл шаблона, спрайт генерации правильно, так конфиг Грунт хорошо.

Не могли бы вы помочь мне, что не так с моим кодом и как я могу достичь своей первоначальной цели?

Спасибо заранее!

Обновление: Я только что включил связанную часть конфигурации Grunt.

'svg-sprites': { 
    'icons': { 
    options: { 
     spriteElementPath: svgProject + 'svg', 
     spritePath: svgProject + 'output/icon-sprite.svg', 
     cssPath: 'modules/_icon-sprite.scss', 
     prefix: 'icon', 
     layout: 'alt-diagonal', 
     cssUnit: 'rem', 
     template: svgProject + 'templates/custom_template.hbs' 
    } 
    } 
}, 

Update 2: Благодаря @ hereandnow78 и @ rasmusfl0e помощь! Они отметили некоторые важные вещи, и, наконец, я смог решить эту проблему. Основной проблемой был относительный путь в определениях фона. Вот это последнее и рабочая версия шаблона:

{{~#sizes~}} 
{{~#items~}} 
@mixin {{selector}} { 
    width: {{unit width ../../config/cssUnit ../../config/cssBaseFontSize}}; 
    height: {{unit height ../../config/cssUnit ../../config/cssBaseFontSize}}; 
    background-position: {{unit x ../../config/cssUnit ../../config/cssBaseFontSize -1}} {{unit y ../../config/cssUnit ../../config/cssBaseFontSize -1}}; 
    @include background(); 
} 
{{~/items~}} 

@mixin background() { 
    background-size: {{unit width ../config/cssUnit ../config/cssBaseFontSize}} {{unit height ../config/cssUnit ../config/cssBaseFontSize}}; 
    background-repeat: no-repeat; 
    background-image: url("{{url pngPath ../cssPath}}"); 

    .svg & { 
     background-image: url("{{url ../svgPath ../cssPath}}"); 
    } 
} 
{{~/sizes~}} 

Answer 1

Чтобы избежать» «на имя класса вам нужно переписать по умолчанию options.selector так (в вашей конфигурации.):

selector: function (filename) { 
     return "icon-" + filename; 
    }, 

в шаблоне есть несколько вещей, чтобы изменить:

@mixin background() {{prefix items ""}} { 

должны, вероятно, просто:

@mixin background() { 

И этот бит:

.svg & { 
    background-image: url("{{url ../svgPath ../cssPath}}"); 
    } 
} 

вероятно, должен быть внутри sizes скобки (чуть выше {{~/sizes~}}).

Я не знаю, что еще может быть неправильно - но попробовать и посмотреть, как это получает вас: D

Answer 2

я вижу 2 возможных проблем в ваших HBS-шаблон

1. отсутствует тильда ~ о закрытии items (я подозреваю, что вы настроили использование ~)

   неправильно: {{/ предметы ~}} вероятно, являются верными: {{~/~ пункты}}

2. в последнем блоке вы имеете фигурную закрывающую скобку, когда отверстие недостающая:

   .svg & { фонового изображение: URL ("{{URL ../svgPath ../ CssPath}} «);} } < - что один, вероятно, устарели