gulp-sass wont import bootstrap installed with bower

Question

I want to iterate through all of my bower packages. All of them that have sass files as their main files, I want to include in the includePaths for gulp-sass.

I'm using the npm package main-bower-files to successfully get me the main files (and I filter down to just the scss files).

But when I go to compile, I get the following error (because right now bootstrap is the only one I have):

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: file to import not found or unreadable: bootstrap

The relevant part of my gulpfile is

var load_paths = bower({
  base: path.join(__dirname, "bower_components"),
  filter: '**/_*.scss'
});

gulp.src(app_css_file)
.pipe(sass({
    includePaths: load_paths
}))
.pipe(concat('app.css'))
.pipe(gulp.dest('build/css'));

charltoons charltoons · Accepted Answer · 2015-02-23T17:59:16

My problem turned out to be that main-bower-files gives you the files, not the directories. Duh. Node-sass needs the directory containing the importable files.

So I have to modify my load_paths a little bit.

for (var i=0; i<load_paths.length; i++){
  // we need to use the parent directories of the main files, not the files themselves
  // so ./bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss
  // becomes ./bower_components/bootstrap-sass-official/assets/stylesheets
  load_paths[i] = path.dirname(load_paths[i]);
}

And that fixed it. Hope this helps someone else :)

gulp-sass wont import bootstrap installed with bower

1 Answers