Adding vendor CSS libraries with Ember CLI and broccoli-compass

5
votes

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.

3
ember.jsember-clibroccolijs
Where did you put your config.rb file for Compass? I keep getting " You must compile individual stylesheets from the project directory." My styles are located under /app/styles and I placed my config.rb in /app, but that doesn't seem to work. - dwhite
I don't have a config.rb, just using .scss files and Compass libraries (e.g. @include border-radius()). - Sam Selikoff

3 Answers

1
votes

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.

0
votes

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.

0
votes

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));
  }