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

Question

我使用 grunt 从分离的 SVG 文件和生成图标的 (s)css 文件生成 sprite 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}}");
  }
}

当我尝试构建 Sprite 时，收到以下错误消息:

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

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

在选项中，我定义了以下属性:spriteElementPath、spritePath、cssPath、prefix、布局，cssUnit，模板

如果我使用官方模板文件， Sprite 会正确生成，因此 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