How to add broccoli-compass to ember-cli v0.0.28?

Question

I would like to be able to use compass to pre-process my SASS into CSS in an ember-cli project.

Doing this with broccoli-sass is trivial, as bower install broccoli-sass is all that is required, as the support for it is already built in.

Doing this with broccoli-compass however, has turned out to be rather tricky... how?

---

Details:

This question has been asked previously, for ember-cli v0.0.23; and it's answer appears to be outdated - The main issue appears to be that ember-cli abstracts a lot of the stuff inBrocfile.js, and puts it into another file, preprocessor.js, using a Registry, and thus the solution would be different, to a standard looking Brocfile.js

---

Update:

This question has been asnwered by @saygun, and the solution allows one to use broccoli-compass to compile SCSS --> CSS. However there are a couple of caveats:

• Minor issue: The existing minifyCss preprocessor in meber-cli will not work. You will need to configure compass to minify its own CSS.
• Major issue: If the SCSS files reference images, the generated CSS files contain links to images where the paths are within the temporary tree folders created by Broccoli. I am not sure how to work around this, and have asked a follow up question: How to generate image sprites in ember-cli using compass?

Answer 1

I have recently published ember-cli-compass-compiler which is a ember-cli addon for newer ember-cli apps(>= 0.0.37).

Just install using the command:

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

No other configuration is needed, it converts app/styles/appname.scss to appname.css correctly. As the name indicates, it allows you to use Compass in addition to sass as well.

Answer 2

you need to install broccoli-compass:

npm install broccoli-compass --save-dev

and you need to install ruby gem sass-css-importer:

gem install sass-css-importer --pre

then in your brocfile do this:

var compileCompass = require('broccoli-compass');

app.styles = function() {
  var vendor = this._processedVendorTree();
  var styles = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles'
  });

  var stylesAndVendor = mergeTrees([vendor, styles, 'public']);

  return compileCompass(stylesAndVendor, 'app' + '/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app' + '/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};