title: How to generate image sprites in ember-cli using compass?
body: <p><em>Update</em> - 20140614:</p>
  
  <p>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 compass for a number of things,
  but its main utility was in its ability to generated image sprites.
  Most other things could be accomplished using pure SCSS.</p>
  
  <p>Thus, I wrote <a href="https://github.com/bguiz/broccoli-sprite" rel="noreferrer">broccoli-sprite</a>.
  This, used in conjunction with ember-cli's built in support for SCSS
  using <a href="https://github.com/joliss/broccoli-sass" rel="noreferrer">broccoli-sass</a>,
  was able to meet my needs.</p>
  
  <p><a href="https://github.com/bguiz/broccoli-sprite" rel="noreferrer"><img src="https://nodei.co/npm/broccoli-sprite.png?compact=true" alt="NPM"></a></p>
  
  <p>You can <a href="http://blog.bguiz.com/post/88719320815/broccoli-sprite-released" rel="noreferrer">read more about the process here</a>.</p>
  
  <p>Now I am thus no longer interested in integrating compass into my ember-cli app.
  As my solution does not directly answer the question (as it does not use compass),
  I consider this question <strong>to be unanswered</strong>.
  Since this question might yet benefit others in the community who wish to do so,
  I am leaving this open, and will still honour the bounty!</p>
  
  <p><em>Update</em> - 20140620:</p>
  
  <p>Bounty has expired.</p>
  
  <hr>
  
  <p><em>Original question</em>:</p>
  
  <p>In an <a href="https://github.com/stefanpenner/ember-cli" rel="noreferrer">ember-cli</a> app,
  using <a href="https://github.com/g13013/broccoli-compass" rel="noreferrer">broccoli-compass</a>,
  how can it be configured such that the generated CSS references image file paths correctly, including generated image file paths?</p>
  
  <p>Using compass, the following SCSS:</p>
  
  <pre><code>@import"icon/*.png";
  @include all-icon-sprites;
  </code></pre>
  
  <p>&hellip; will generate a single <code>.png</code> file with all of the images in the <code>icon</code> folder, and CSS for displaying each.</p>
  
  <p>I would like to be able to do the same via compass within ember-cli,
  which uses <a href="https://github.com/broccolijs/broccoli" rel="noreferrer">broccoli</a> 
  to build its asset pipeline.</p>
  
  <ul>
  <li>Must work within ember-cli - that is, it must be built when ember serve or ember build is run </li>
  <li>Must use compass to generate image sprites from a folder of images </li>
  <li>The images generated should be copied to the assets folder </li>
  <li>The generated CSS should point to images located in the assets folder, not to a temporary tree folder</li>
  </ul>
  
  <hr>
  
  <h3>What I have attempted so far:</h3>
  
  <p><strong>#1</strong></p>
  
  <pre><code>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',
    });
  };
  </code></pre>
  
  <p>When I do this, the <code>compass</code> command fails because it cannot locate the image files within the tree.</p>
  
  <p><strong>#2</strong></p>
  
  <pre><code>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',
    });
  };
  </code></pre>
  
  <p>Just to try things out, I copy the image files into the styles directory.
  This time the compass command succeeds, but,
  the generated CSS references image files that do not exist.
  The generated images do not appear to get copied into the assets folder as expected (
  or anywhere else for that matter):</p>
  
  <pre><code>$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
  </code></pre>
  
  <hr>
  
  <p><em>Details</em>:</p>
  
  <p>SCSS that I would like to be able to compile (for sprite generation):</p>
  
  <pre><code>@import"compass/utilities/sprites";
  $icon-layout: smart;
  $icon-sprite-dimensions: true;
  @import"icon/*.png";
  @include all-icon-sprites;
  @import"compass/css3/images";
  </code></pre>
  
  <hr>