如何使用罗盘生成ember-cli中的图像精灵？

Question

更新 - 20140614：

在没有得到这个问题的答案之后，或者在github上， 我决定提出自己的问题解决方案。 我正在使用罗盘来做很多事情， 但其主要功能在于它能够生成图像精灵。 大多数其他事情可以使用纯SCSS完成。

因此，我写了broccoli-sprite。 这与ember-cli一起使用，内置支持SCSS 使用broccoli-sass， 能够满足我的需求。

你可以read more about the process here。

现在我不再有兴趣将指南针集成到我的ember-cli应用程序中。 由于我的解决方案没有直接回答问题（因为它不使用指南针）， 我认为这个问题没有答案。 既然这个问题可能会使社区中其他希望这样做的人受益， 我将这个开放，并仍将尊重赏金！

更新 - 20140620：

Bounty已过期。

---

原始问题：

在ember-cli应用中， 使用broccoli-compass， 如何配置，使生成的CSS正确引用图像文件路径，包括生成的图像文件路径？

使用指南针，以下SCSS：

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

...将生成一个.png个文件，其中包含icon文件夹中的所有图片，以及用于显示每个图像的CSS。

我希望能够通过ember-cli中的指南针做同样的事情， 使用broccoli 建立资产管道。

• 必须在ember-cli中工作 - 也就是说，必须在执行ember serve或ember build时构建
• 必须使用指南针从图像文件夹生成图像精灵
• 生成的图像应复制到资源文件夹
• 生成的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引用不存在的图像文件。 生成的图像似乎没有按预期复制到assets文件夹中（ 或其他任何地方）：

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

---

详细：

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

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

---

Answer 1

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

在项目中安装run：npm install ember-cli-compass --save-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。也许这就是问题，你不需要插件。

我希望这可以解决您的问题。

Answer 2

艰难的方式

添加到您的brocfile

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');
}

更优雅的方式

配置指南针以使用特定目录

@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个文件中。不幸的是，brocfile中的这些选项不会飞。