Adding vendor CSS libraries with Ember CLI and broccoli-compass

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.