How to add broccoli-compass to an ember-cli app

add-broccoli-compass-to-ember-cli-app.md

Run the following commands:

gem install --pre compass sass-css-importer
npm install --save-dev broccoli-static-compiler broccoli-merge-trees broccoli-compass

(This assumes that you already have Ruby and NodeJs installed)

Then add the contents of snippet-add-broccoli-compass-to-ember-cli-app.js to your Brocfile.js, right after var app = new EmberApp({, for example:

var app = new EmberApp({
  name: require('./package.json').name,

  minifyCSS: {
    enabled: true,
    options: {}
  },

  getEnvJSON: require('./config/environment')
});

var brocStaticCompiler = require('broccoli-static-compiler');
...

Lastly, you must rename app/styles/app.scss to whatever your app name indicates, as compass does not do this additional step for you:

mv app/styles/app.scss app/styles/foobarapp.scss

Thanks goes to @saygun for his answer on Stackoverflow.

Note that this does not work together with minifyCss, and the production builds will get the full/ verbose CSS output.

snippet-add-broccoli-compass-to-ember-cli-app.js

var brocStaticCompiler = require('broccoli-static-compiler');
var brocMergeTrees = require('broccoli-merge-trees');
var brocCompass = require('broccoli-compass');
app.styles = function() {
  var vendorTree = this._processedVendorTree();
  var stylesTree = brocStaticCompiler(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles',
  });
  var vendorPlusStyleTrees = brocMergeTrees([vendorTree, stylesTree, 'public']);

  var invokeCompass = brocCompass(vendorPlusStyleTrees, 'app/styles/*.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets',
  });

  return invokeCompass;
};

I needed to install a different version of the compass gem to get this to work (--pre gets you an alpha that will hang because the command line option for project-type has changed to app).

$ gem install compass

should get you 0.12.6 which works with the setup above

I also needed to change

var invokeCompass = brocCompass(vendorPlusStyleTrees, 'app/styles/*.scss', {

to

var invokeCompass = brocCompass(vendorPlusStyleTrees, 'app/styles/app.scss', {

because my app.scss includes all the other files.

Not minifying in prod seems like a deal-breaker, no?

Take a look at my ember-cli-compass-compiler addon, it reduces compass setup to single npm install.
Just do the following in your ember-cli app and everthing should work automatically.

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