带有 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、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'
    }
  }
},

更新二： 感谢@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

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

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

错误：{{/items~}} 可能是正确的：{{~/items~}}
在你的最后一个块中，你有一个 curly 右大括号，其中缺少开口：

.svg & { 背景图片：url("{{url ../svgPath ../cssPath}}"); } } <-- 那个可能已经过时了

Answer 2

要避免“.”在类名上，您需要像这样（在您的配置中）覆盖默认值 options.selector：

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

在您的模板中有几处需要更改：

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

应该只是：

@mixin background() {

还有这个位：

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

可能需要在 sizes 括号内（就在 {{~/sizes~}} 上方）。

我不知道还有什么问题 - 但尝试一下，看看它如何让你:D

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

HBS template with grunt-dr-svg-sprites

javascript

templates

gruntjs

handlebars.js