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?

@JordyLangen In the project folder, find node_modules/ember-cli/lib/preprocessors.js, and I found this Registry system. I tried to add the a new function to that (modules.exports.preprocessCompass = function...), but just got a some rather cryptic stack traces... so not very far. I'm about to try @saygun 's suggestion below. — bguiz
@JordyLangen I go into a little more detail in this issue on github, although in this context, it was not specific to broccoli-compass, and was about adding the ability to configure any broccoli plugin in the main Brocfile.js and have it integrate well with the built in ones in preprocessors.js. — bguiz

saygun saygun · Accepted Answer · 2014-06-05T10:18:16

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

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

2 Answers