How to config the Sass dependencies paths inside main.scss file?

[isaacalves]

want to adapt a gulpfile.js and change my bower_components/ folder to app/bower_components/.

I updated the directory in .bowerrc, so now everytime i do a bower install it will use the right one:

{ "directory": "app/bower_components" }

Now, how can gulp-wiredep write the correct Sass path location inside my main Sass file?

For example, gulp-wiredep adds the following line in my main.scss file, right after // bower:scss:

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

It should be now @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

How can I change that path? I believe it's some configuration on the wiredep task:

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;

  gulp.src('app/styles/*.scss')
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap-sass-official'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});

But I don't know how can I configure that to do what I need, I couldn't find any documentation about that.

I know that if I change manually that path in my sass file to "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss", the gulp serve will work, but as soon as i install a bower component it will change that path to the one without the app/ at the beginning again and it will break the task.

I updated my wiredep settings to:

.pipe(wiredep({
  scss: {
    replace: {
      sass: '@import "app/{{filePath}}";',
      scss: '@import "app/{{filePath}}";'
    }
  },
  ignorePath: /^(\.\.\/)+/
}))

...still doesn't get the right path

[isaacalves]

i've just forgotten to wrap 'scss' in 'fileTypes' object