How to generate image sprites in ember-cli using compass?

Question

Update - 20140614:

After not getting any answers to this question, or on github, I decided to come up with my own solution to the problem. I was using compa

Answer 1

The hard way

Add to your brocfile

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

and then import the icons

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

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

and overwrite the path

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

The more elegant way

Configure compass to use particular directory

@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;

It is not a perfect solution although it works. Configuration should not be stored in .scss files. Unfortunately those options inside brocfile are not going to fly.

Answer 2

I thought this would be solved by using an ember addon and postprocess hook, i published an addon,

To install run: npm install ember-cli-compass --save-dev inside your project.

Configure in your 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();

This seems to do what you want but i am not sure. Also i needed to change public/images to just images, because public/images folder copies into dist/images. Maybe that's the issue and you don't need an addon.

I hope this fixs your problem.