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";

Cleave

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!

Carloscarlota

Answer 2

I just used the grunt with Gruntfile.js in this case, by adding loadPath, with the location of bower_components folder, it is in the same level as a project in my case:

    sass: {
        dev: {
            options: {
                style: 'expanded',
                compass: false,
                loadPath: 'bower_components'
            },
            files: {
                '<%= project.css %>/style.css': '<%= project.scss %>/style.scss'
            }
        }
    },

After just change your @import section to:

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

Brassiere