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

Question

更新 - 20140614:

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

因此,我写了西兰花精灵.这与ember-cli使用broccoli-sass内置支持SCSS一起使用,能够满足我的需求.

您可以在此处详细了解该过程.

现在我不再有兴趣将指南针集成到我的ember-cli应用程序中.由于我的解决方案没有直接回答问题(因为它没有使用罗盘),我认为这个问题没有答案.既然这个问题可能会让社区中的其他人有所帮助,那么我将保持这种开放,并且仍将尊重赏金!

更新 - 20140620:

赏金已过期.

---

原始问题:

在使用西兰花罗盘的ember-cli应用程序中,如何配置以使生成的CSS正确引用图像文件路径,包括生成的图像文件路径？

使用指南针,以下SCSS:

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

...将生成包含.png文件icon夹中所有图像的单个文件,以及用于显示每个图像的CSS.

我希望能够通过ember-cli中的指南针做同样的事情,它使用西兰花 来构建其资产管道.

• 必须在ember-cli中工作 - 也就是说,它必须在ember serve或ember build运行时构建
• 必须使用指南针从图像文件夹生成图像精灵
• 生成的图像应复制到assets文件夹
• 生成的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

艰难的路

添加到您的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不会飞。