如何使用羅盤生成ember-cli中的圖像精靈？

Question

更新 - 20140614：

在沒有得到這個問題的任何答案之后，或者在github上，我決定拿出自己的問題解決方案。 我正在使用羅盤來做許多事情，但它的主要功能在於它能夠生成圖像精靈。 大多數其他事情可以使用純SCSS完成。

因此，我寫了西蘭花精靈 。 這與ember-cli使用broccoli-sass內置支持SCSS一起使用，能夠滿足我的需求。

您可以在此處詳細了解該過程 。

現在我不再有興趣將指南針集成到我的ember-cli應用程序中。 由於我的解決方案沒有直接回答問題（因為它沒有使用羅盤），我認為這個問題沒有答案 。 既然這個問題可能會讓社區中的其他人有所幫助，那么我將保持這種開放，並且仍將尊重賞金！

更新 - 20140620：

賞金已過期。

---

原始問題 ：

在使用broccoli-compass的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

我認為這可以通過使用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中的那些選項不會飛。