Compiling Compass in an Ember-CLI project

Question

I'm using ember-cli v0.0.23, and am trying to get the broccoli-compass package working with my project, and I've run into some problems.

First, in my Brocfile, I have replaced the standard Ember-CLI "blueprint" version of:

var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');

with the following:

var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, 'app/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: 'app/styles',
    imagesDir: 'public/images/'
});    

However, when I run an ember build, I receive the following output:

$ ember build
[broccoli-compass] Error:  Command failed: Errno::ENOENT on line ["155"] of /Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory - /Users/gaker/Sites/project/tmp/tree_merger-tmp_dest_dir-GrWa8Zva.tmp/app/styles/app.scss
Run with --trace to see the full backtrace. The command-line arguments was: `compass compile app/styles/app.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images/ --css-dir "../compass_compiler-tmp_dest_dir-eFsq51BG.tmp"`

If I try to run the compass command that is output in the error in my terminal, it does create the file, only it is up one directory from my project root (notice --css-dir in the output).

I have tried many combinations of options sassDir, imagesDir, etc when calling compileCompass and this is the closest I've gotten.

So any ideas on what I can do to successfully get compass, broccoli-compass and ember-cli playing nicely?

Thanks in advance

Answer 1

Try this (added prefix and cssDir):

var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: prefix + '/styles',
    imagesDir: 'public/images/',
    cssDir: '/assets'
});

Steffen

Answer 2

You can use ember-cli-compass-compiler addon to compile compass in ember-cli apps.

Just do the following in your ember-cli app:

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

This is all you need to do, everything works as expected from now on. It compiles your appname.scss file into appname.css on ember build or ember serve command.