Broccoli.js and Ember-CLI : trying to get SCSS compiler to work

Question

I'm trying to use Foundation with an Ember-CLI app and I want to compile all the SCSS with broccoli-scss. For the life of me I cant get it to work.

I have Foundation in my bower components so heres what I've tried, modled off of the broccoli sample app :

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler')
var compileSass = require('broccoli-sass');

var app = new EmberApp();

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: './bower_components/foundation/scss',
  destDir: './app/styles'
});

var appsScss = compileSass([styles], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree();

And...

// app/styles/app.scss
@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";

I'n the browser I'm only getting about 800 lines of compiled CSS, where the standard foundation.css is about 4.4k lines long. So something is obviously wrong.

Thanks

Answer 1

So here is an example:

var tree = pickFiles("app/styles", {
  srcDir: '/',
  destDir: 'mui'
});
var muiTree = pickFiles("material-ui/src/less", {
  srcDir: '/',
  destDir: 'material-ui'
});
return compileLess(mergeTrees([tree, muiTree]), 'mui/app.less', 'assets/app.css')

so you can see the first pick file creates a tree for all the app styles. The second pick files create a tree for the library styles (in your case this should be foundation). You should have a desination directory that matches the style library (in this case material-ui). This will be used for the imports in your less/sass file:

@import "material-ui/scaffolding.less";
@import "material-ui/components.less";

You see that I do not reference the material-ui files thru global path, but based on the destDir name I previously used.

The call to compileLess (which is the same as compileSass in your example), takes the full tree of less/sass dependencies as the first param, the second param is the main file for your styles and the third is the output file.

When less/sass want to check for dependencies (via import) it will look in the tree you passed as the first param.

Hope this helps.