Sass importing bower components

Question

I have moved over from COMPASS to Libsass, the speeds are great but I need to use a few bower components to get this working.

It may be a bit pedantic but I have to import my components like this at the top of my scss file.

   @import "../bower_components/compass-mixins/lib/compass";
   @import "../bower_components/susy/sass/susy";

It's ugly, is there a way to either import them via grunt or alias the files so I could do

 @import "compass";
 @import "susy";

Answer 1

To manage your dependencies, you can use Grunt Wiredep (https://github.com/stephenplusplus/grunt-wiredep) to automatically add the files in your main.scss file.

Add the main.scss to your wiredep config.

wiredep: {

  task: {    

    src: [
      'app/styles/main.scss',  // .scss & .sass support...
    ]
  }
}

And pop this in your main.scss file.

// bower:scss
// endbower

Hope that helps you!