Adding vendor CSS libraries with Ember CLI and broccoli-compass - ember.js

Question

I'm having trouble adding CSS libraries to my Ember CLI project when using the broccoli-compass plugin.
I've added this line to my brocfile:
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: 'vendor'
});
};
but now I'm stuck. I've tried
app.import('vendor/bootstrap/docs/assets/css/bootstrap.css');
but this doesn't work, because (I think) I've overwritten app.styles.
I've tried adding an importPath to my Compass config, so that I can #import in my SASS files, but that hasn't worked either.

Answer 1

It seems the app.styles = ... line above overwrites some Ember CLI code, so the app.import suggestion from Ember CLI guides doesn't work.
After spending some time with Broccoli I figured out how to serve the vendor folder:
var pickFiles = require('broccoli-static-compiler');
var vendor = pickFiles('vendor', {srcDir: '/', destDir: '/vendor'});
Now broccoli serve serves everything in my vendor folder, and
#import 'vendor/bootstrap/docs/assets/css/bootstrap.css';
works in my app.scss file.
Of course, I will need to do more work so that only the distribution versions of the vendor assets are included in the final build.

Answer 2

Version 0.0.5 fixes the issue, here's what worked for me:
var compileCompass = require('broccoli-compass');
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: [
process.cwd() + '/vendor/foundation/scss'
],
});
};
Now I'm able to do #import foundation in my scss file.

Answer 3

You can add a vendor file in addon.scss adding a treeForAddon hook in index.js of the addon, merging the vendor directory with a Funnel before the compilation.
treeForAddon: function(tree) {
this._requireBuildPackages();
if (!tree) {
return tree;
}
var addonTree = this.compileAddon(tree);
var vendorCss = new Funnel(this._treeFor('vendor'), {
srcDir: '/css'
});
var mergedStylesTree = new MergeTrees([this._treeFor('addon-styles'), vendorCss]);
var stylesTree = this.compileStyles(mergedStylesTree);
return MergeTrees([addonTree, stylesTree].filter(Boolean));
}