Support Bourbon

[recipher]

Hi. I'm looking at how to support bourbon (http://bourbon.io) which works with node-sass, via the https://github.com/lacroixdesign/node-bourbon module.

How do supply includePaths to the broccoli-sass compiler? I looked through the code but it's non-obvious (to me). This is how the bourbon includePaths are supplied using the module in code:

var bourbon = require('node-bourbon').includePaths;

sass.render({
  file: './application.scss',
  success: function(css){
    console.log(css);
  },
  error: function(error) {
    console.log(error);
  },
  // If you have additional paths to include, do something like:
  // includePaths: bourbon.concat('other/path', 'another/path'),
  includePaths: bourbon,
  outputStyle: 'compressed'
});

So, if I can pass the bourbon includePaths in my brocfile.js to the compiler, then it should just all work.

However, at the moment, I'm getting it to work by hacking it like this:

var bourbon = broccoli.makeTree('node_modules/node-bourbon/assets/stylesheets');

var appCss = compileSass(sourceTrees.concat(bourbon), 'public/app.scss', 'assets/app.css');

But that is obviously non-optimal. And it only supports @import 'bourbon'; rather then importing individual files (same issue as bootstrap-sass).

Thanks!

[recipher]

Ok, I see now that the first argument to compileSass is includePaths. Dope.

So, alternatively, this works:

var bourbon = require('node-bourbon').includePaths;
var appCss = compileSass(sourceTrees.concat(broccoli.makeTree(bourbon)), 'public/app.scss', 'assets/app.css');

This also seems to allow me to @import individual files, but the results are unsatisfactory (it doesn't work properly - of the 2 mixins I tried, one fails to work altogether, and the other produced the wrong css).

But, the right approach?

[recipher]

A little more information here.

When I run broccoli build, it works, but when I run broccoli serve, I get this, repeatedly:

Warning: failed to stat /Users/johnny/Code/engage/client/node_modules/node-bourbon/assets/stylesheets

[chrism]

Hi,

Not sure if this is relevant to your issue or not, but I've been using bourbon fine just by adding it via bower and then including it at the beginning of my app.scss, without any need to include node-bourbon in the Brocfile like this:

@import "vendor/bourbon/app/assets/stylesheets/bourbon";

I did have an issue with using bourbon neat, because the script tags ember currently uses (yay HTMLbars) causes problems with the nth-child selectors.

I've made a quick temporary fix to use bourbon neat with Ember in this fork

http://github.com/chrism/neat.git#ember-support

Thanks

[recipher]

Thanks for that. I'll give that a try until I work it out.

[recipher]

I made the second problem go away (the "failed to stat" error on broccoli serve) by using a relative pathname rather than the full absolute path:

  var bourbonTree = broccoli.makeTree(_(bourbon).first().replace(__dirname, "./"));

  var appCss = compileSass(sourceTrees.concat(bourbonTree), 'public/app.scss', 'assets/app.css');

Which seems a bit hacky to me, but it works (for @import 'bourbon' only, still).

[joliss]

Thanks, I filed the watcher issue at https://github.com/joliss/broccoli/issues/60.

[DougPuchalski]

I get error: file to import not found or unreadable: "settings/prefixer" even thought it's quite clearly in my path. Any ideas?

[EmergentBehavior]

This will probably only be helpful if you're building an EmberJS project, but I've used broccoli-sass fine with bourbon in the context of ember-cli. I installed bourbon in the recommended fashion and just included @import 'bourbon/bourbon'; at the top of my SCSS file (and "broccoli-sass": "^0.1.4", in the devDependencies section of my project's Brocfile).

[ghost]

ember-cli works fine for building even if not using emberjs projects. I decided to use that myself because broccoli build requires you to delete the build directory each time. It also has a watch command.

I had a similiar problem as @recipher , but switching to ember-cli made it work properly just like @EmergentBehavior said

[simonexmachina]

@EmergentBehavior, FYI I've written an ember-cli addon called ember-cli-sass that allows you to specify the include paths (eg. for Foundation)