Question

我正在开发一个使用指南针的moovweb项目。现在，我正在为精灵实现2x图像的支持。

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

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

然后，在此之后，我将包含并执行scss文件，该文件将生成2x精灵规则（使用媒体查询）：

@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's version）来包含一个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

不确定问题可能是什么，但您可以直接运行指南针，以获得更好的输出或洞察发生的事情。

moov SDK使用以下罗盘命令编译资产：

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

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

Answer 2

当我将JPG图像放在与PNG相同的目录中时，我得到了同样的错误，这很有趣。

一旦我删除了那些JPG，就可以了。

Answer 3

我今天遇到了这个错误。

这实际上是由于空（如0kb）PNG文件

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

3 个答案: