带有 grunt-dr-svg-sprites 的 HBS 模板

Question

我正在使用 grunt 从分离的 SVG 文件和生成图标的 (s)css 文件生成精灵 SVG 图像（带有 PNG 后备）。对于这个过程，我使用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");
  }
}

但是因为我对 Handlebars 模板语法不是很熟悉，所以我创建的模板已经损坏并且无法正常工作。它看起来像这样：

{{~#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

但是无论如何，如果 mixin 名称中的 {{className}} 包含“.”，那么它也是错误的。 （点）开头，background() mixin 也不应该包含任何项目名称。

在选项中我定义了以下属性：spriteElementPath、spritePath、cssPath、prefix、layout、cssUnit、template

如果我使用官方模板文件，精灵生成正常，所以 Grunt 配置没问题。

您能帮我看看我的代码有什么问题吗？如何才能实现我最初的目标？

提前谢谢你！

更新： 我刚刚包含了 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'
    }
  }
},

更新 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

我在您的 hbs 模板中发现 2 个可能的问题

1. 关闭items 时缺少波浪号~（我怀疑您自定义了~ 的用法）

   错误：{{/items~}} 可能正确：{{~/items~}}

2. 在你的最后一个块中，你有一个缺少开口的大括号：

   .svg & { 背景图像： url("{{url ../svgPath ../cssPath}}"); } }