指南针给出错误无法识别的文件类型:png'))

Question

我正在研究一个使用指南针的moovweb项目.现在,我正在为精灵实现2x图像的支持.

我正在做的是让指南针生成1x精灵,如下所示:

$icons-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;

然后,在此之后,我将包含并执行将生成2x精灵规则的scss文件(使用媒体查询):

@import "../_retina-sprites.scss";
$icons2x: sprite-map("icons2x/*.png");
.icons-logo {
  @include retina-sprite(logo, $icons2x);
}

.icons-bag {@include retina-sprite(bag,$ icons2x); }

我创建了这个_retina-sprites.scss(基于Adam Brodzinski的版本)来包含一个mixin来添加媒体查询规则来选择2x图像,如下所示:

@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size

@mixin retina-sprite($name, $sprites2x) {
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    & {
      $pos: sprite-position($sprites2x, $name);
      background-image: sprite-url($sprites2x);
      background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
      @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
    }
  }    
}

但是,我在调用的行上生成精灵时得到此输出sprite-path():

Syntax error: Unrecognized file type: png'))

这让我觉得罗盘正在写一个精灵网址而不是一个精灵路径,因此给'))文件名后缀.

以前有人进过这个吗？

Answer 1

不确定问题是什么，但您可以直接运行 Compass 以获得更好的输出或了解正在发生的情况。

moov SDK 使用以下 compass 命令来编译您的资源：

compass compile <my-project-path>/assets --relative-assets --sass-dir stylesheets --css-dir stylesheets/.css --images-dir images --require sass/plugin

希望手动运行可以为您提供更多信息。