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，{ {1}}

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

你能帮我解决一下我的代码有什么问题吗？我怎样才能实现我的最初目标？

提前谢谢！

更新我刚刚收录了Grunt配置的相关部分。

template

更新2： 感谢@ hereandnow78和@ rasmusfl0e的帮助！他们指出了一些重要的事情，最后我可以解决这个问题。主要问题是背景定义中的相对路径。这是模板的最终版本和工作版本：

'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'
    }
  }
},

Answer 1

避免使用“。”在classname上你需要像这样覆盖默认的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-template中看到了两个可能的问题

在结束~时缺少代字号items（我怀疑您自定义了~的使用情况）

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

.svg＆amp; { background-image：url（“{{url ../svgPath ../cssPath}}”）; } }＆lt; - 那个可能已经过时了

HBS模板与grunt-dr-svg-sprites

2 个答案: