ember-cli-broccoli-compass.js

app.registry.add('css', 'broccoli-compass', 'scss', {
  toTree: function(tree, inputPath, outputPath, options) {
    // broccoli-compass doesn't like leading slashes
    if (inputPath[0] === '/') { inputPath = inputPath.slice(1); }

    tree = mergeTrees([
      tree,
      'public'
    ], {
      description: 'TreeMerger (stylesAndVendorAndPublic)'
    });

    return compileCompass(tree, inputPath + '/app.scss', {
      outputStyle: 'expanded',
      require: 'sass-css-importer', // Allows us to import CSS files with @import("CSS:path")
      sassDir: inputPath,
      imagesDir: 'images',
      //fontsDir: 'fonts',
      cssDir: outputPath
    });
  }
});

Incase anyone is wondering, this [awesome] solution works with the following npm modules installed and required above the code in this gist:

var mergeTrees = require('broccoli-merge-trees');
var compileCompass = require('broccoli-compass');

@wagenet I have turned this into ember-cli-compass-compiler addon which I think makes it easier to use since it is a single line install and it can be updated easily. It is installed with a single command, please take a look.

npm install --save-dev ember-cli-compass-compiler