3

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

gaker
  • 53
  • 6

2 Answers2

3

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.

quaertym
  • 3,917
  • 2
  • 29
  • 41
  • (Tested in 0.0.40) the compiling part works, but i can't reference images that are in public/assets/images (or another directory). The URL will be http://localhost:4200/tree_merger-tmp_dest_dir-HoagpjbQ.tmp/images/logo.png (or similar) and the image can't be found. – amenthes Aug 05 '14 at 13:22
  • (0.0.40) We're now adding this to the `Brocfile.js`: `var app = new EmberApp({ compassOptions: { imagesDir: '../assets/images/' } });` note the relative imagesDir - this way it works on mac and win. – amenthes Aug 05 '14 at 13:56
  • @amenthes yep, that's the way you override default options. I will investigate this, `assets/images/` may be a good default, then I will release a new version. – quaertym Aug 05 '14 at 16:11
  • the problem is pushing it to Heroku: `version: 0.0.44` `BuildingBuilding./bin/sh: compass: not found` – Gustavo Siqueira Sep 15 '14 at 19:27
  • Do you need to have broccoli-sass installed also to get this working? I had both installed and I can't get any sass to compile now, even after removing broccoli-sass I still can't get any sass to compile, also not getting any errors in the terminal when I save a sass file. The app.css file is completely blank no matter how many times I save. – Jordan Nov 06 '14 at 17:19
  • @Jordan You do not need broccoli-sass if you installed it please remove. You should also need to have an `app.scss` file in your styles folder. – quaertym Nov 06 '14 at 17:59
  • @quaertym I removed it and I had a app.scss in their but it was not working, when I changed it to the title of my app it worked. Is this expected behavior? – Jordan Nov 06 '14 at 19:44
  • @Jordan yes, sorry for the misleading comment before. Filename should be `appname.scss` as mentioned in the answer. – quaertym Nov 06 '14 at 20:54
2

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

Steffen Brem
  • 1,738
  • 18
  • 29
  • 1
    @ steffen : As of ember-cli v0.0.28 - where does this go? In Brocfile.js somewhere? I'm not sure where to put these within the project, and suspect that it might have changes since v0.0.23. – bguiz Jun 04 '14 at 08:03