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.

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, Jun 02 '14 at 15:17
I don't have a config.rb, just using .scss files and Compass libraries (e.g. @include border-radius()). — Sam Selikoff, Jun 02 '14 at 20:13

score 1 · Answer 1 · answered Jun 02 '14 at 20:17

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.

answered Jun 02 '14 at 20:17

Sam Selikoff

12,366
13
58
104

@ sam selikoff: This is quite similar to the issue I am facing with importing images from my SCSS files. If you can, could you please take a look at my question: http://stackoverflow.com/q/24074351/194982 ... or post a link to your full `Brocfile.js` where you have got this import working? – bguiz Jun 10 '14 at 00:39
Thanks, could you please post it including the bit with `app.styles` as well? ... the compass bit is the part I am having the most trouble with. – bguiz Jun 10 '14 at 05:40
Sam, thanks for that. I have tried doing what you have done, and the vendor CSS bit works like a charm. However, I didn't have much luck with sprite generation of images. I've started a bounty on my question (linked in first comment). I see that you have contributed to broccoli-compass yourself - it would be much appreciated if you took a crack at it. – bguiz Jun 11 '14 at 06:56

score 0 · Answer 2 · edited Nov 23 '15 at 01:54

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.

score 0 · Answer 3 · answered Mar 17 '18 at 08:52

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

Adding vendor CSS libraries with Ember CLI and broccoli-compass

3 Answers3