5

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?
Community
  • 1
  • 1
bguiz
  • 27,371
  • 47
  • 154
  • 243
  • @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 Jun 06 '14 at 01:39
  • @JordyLangen I go into a little more detail in this [issue on github](https://github.com/stefanpenner/ember-cli/issues/810#issuecomment-45045098), 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 Jun 06 '14 at 01:45

2 Answers2

3

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.

quaertym
  • 3,917
  • 2
  • 29
  • 41
  • for more recent projects, THIS is the way to go. This worked instantly for an ember-cli 0.1.1 project. – amenthes Oct 06 '14 at 09:39
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'
  });
};
saygun
  • 1,438
  • 12
  • 26
  • +1 & check - thank you so much for figuring all this out. A few extra tweaks were necessary in order to get it working, but too lengthy for a comment [so here's a gist](https://gist.github.com/bguiz/49e3d228e71ddc7fde97). – bguiz Jun 06 '14 at 03:37
  • ... but in summary `app.scss` does not work, use `*.scss` instead. Also, how did you figure this out? I have not been able to find documentation for `app.styles` and `_processedVendorTree()`. – bguiz Jun 06 '14 at 03:39
  • @ saygun - This solution does not appear to work when the SCSS files reference image files - the URLs in the output CSS contain the temporary tree files. If you could, please take a look at my follow up question on this: http://stackoverflow.com/q/24074351/194982 – bguiz Jun 06 '14 at 04:49
  • In case it helps others: I ended up having to debug through the compass code itself to see how it was resolving paths. It seems pretty hacky and time consuming, so if things aren't working for you, check there. – aceofspades Jul 22 '14 at 23:46