Javascript 如何使用compass在ember cli中生成图像精灵？

更新-20140614：

在没有得到这个问题的任何答案后，或者在github上， 我决定自己想出解决这个问题的办法。 我用指南针做了很多事情， 但它的主要用途是能够生成图像精灵。 大多数其他事情都可以使用纯SCS完成

因此，我写道。 这与ember cli对SCS的内置支持结合使用 使用， 能够满足我的需要

你可以

现在，我不再对将compass集成到我的ember cli应用程序感兴趣。 由于我的解决方案没有直接回答问题（因为它没有使用指南针）， 我认为这个问题<强>未回答< /强>。 由于这个问题可能会使社会上其他希望这样做的人受益， 我会让这件事公开的，我仍然会尊重赏金的

更新-20140620:

赏金过期了

---

原始问题：

在应用程序中， 使用， 如何配置它以使生成的CSS正确引用图像文件路径，包括生成的图像文件路径

使用指南针，以下SCS：

@import"icon/*.png";
@include all-icon-sprites;

…将生成一个

.png

文件，其中包含

图标

文件夹中的所有图像，以及用于显示每个图像的CSS

我希望能够通过ember cli中的compass执行相同的操作， 哪个使用 建立其资产管道

• 必须在ember cli中工作-也就是说，必须在运行ember Service或ember build时生成它
• 必须使用compass从图像文件夹生成图像精灵
• 生成的图像应复制到“资源”文件夹中
• 生成的CSS应该指向位于assets文件夹中的图像，而不是临时树文件夹

---

到目前为止我所做的尝试： #1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

执行此操作时，

compass

命令失败，因为它无法在树中找到图像文件

#2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

为了进行尝试，我将图像文件复制到styles目录中。 这次指南针命令成功，但是， 生成的CSS引用不存在的图像文件。 生成的图像似乎没有按预期复制到资产文件夹中( 或者在其他任何地方：

---

详情：

我希望能够编译的SCS（用于精灵生成）：

---

---

我认为这可以通过使用ember插件和后处理钩子来解决，我发布了一个插件

要安装，请运行：

npm install-ember-cli-compass——在项目中保存dev

在

Brocfile.js

中进行配置

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    compass: {
        outputStyle: 'expanded',
        relativeAssets: false,
        sassDir: 'assets',
        imagesDir: 'images',
        cssDir: 'assets'
    }
});

module.exports = app.toTree();

这似乎是你想要的，但我不确定。我还需要将

public/images

更改为仅

images

，因为

public/images

文件夹复制到

dist/images

。也许这就是问题所在，你不需要插件

我希望这能解决你的问题。

艰难的道路 添加到您的

文件中

var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

然后导入图标

@import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

并覆盖路径

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

更优雅的方式 配置compass以使用特定目录

@import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

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

---

这不是一个完美的解决方案，尽管它是有效的。配置不应存储在

.scss

文件中。不幸的是，

brockfile

中的那些选项将无法运行。

如果可能的话，如果您可以发布您的解决方案（通过回答自己的问题），以便其他人可以更清楚地看到它，那么这个问题似乎得到了回答：）@markthethomas谢谢您的评论，但不幸的是，我采用的解决方案不符合这个问题的要求。我找到了一种创建精灵的方法，但没有使用指南针。请参阅我从20140614开始的更新：“由于我的解决方案没有直接回答这个问题（因为它没有使用指南针），而且这个问题可能会使社区中希望这样做的其他人受益，因此我将保留此开放，并将继续尊重赏金！”。。。我仍然认为这个问题是没有答案的，解决办法仍然是大的！谢谢你的澄清：）什么！250，我一个多星期前回答了这个问题。有点道理。你介意将我链接到你的git存储库吗？看起来像是。@bguiz现在修复了它，我没有添加它，因为我不确定它是否正确。@facebook很抱歉，但我一直没有时间验证它-有没有其他人尝试过并使它工作了？@facebook这有点苛刻，不是吗？虽然赏金不是我给的，看来你得要求延期了。如果可以的话我会的，我只是在刚刚升级了我的操作系统之后，现在运气不太好。看看吧，这太苛刻了。

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

@import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

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