Как сгенерировать спрайты изображений в ember-cli с помощью компаса?

Обновление – 20140614:

Не получив ни ответов на этот вопрос, ни на github, я решил придумать собственное решение проблемы. Я использовал компас для нескольких целей, но его основная полезность заключалась в возможности генерировать спрайты изображений. Большинство других вещей можно было бы выполнить с помощью чистого SCSS.

Таким образом, я написал broccoli-sprite. Это, в сочетании со встроенной поддержкой SCSS в ember-cli с использованием broccoli-sass, позволило для удовлетворения моих потребностей.

Вы можете узнать больше об этом здесь.

Таким образом, теперь я больше не заинтересован в интеграции компаса в мое приложение ember-cli. Поскольку мое решение не дает прямого ответа на вопрос (поскольку в нем не используется компас), я считаю этот вопрос оставшимся без ответа. Поскольку этот вопрос может принести пользу другим членам сообщества, которые захотят это сделать, я оставляю его открытым и все равно буду соблюдать награду!

Обновление – 20140620:

Срок действия награды истек.

Исходный вопрос:

В приложении 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 должен указывать на изображения, расположенные в папке ресурсов, а не на папку временного дерева.

Что я пытался до сих пор:

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

Просто чтобы попробовать, я копирую файлы изображений в каталог стилей. На этот раз команда компаса выполняется успешно, но сгенерированный CSS ссылается на несуществующие файлы изображений. Сгенерированные изображения не копируются в папку ресурсов, как ожидалось (или куда-либо еще в этом отношении):

$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";