10

Problem: I'm using gulp-sass and would like to define a load_path so that I don't have to have really long @import rules voor bower dependencies e.g.

@import "normalize"

instead of 

@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"

What is the best way to i achieve this when using gulp-sass which uses the LibSass engine to process sass files?

Timidfriendly
  • 3,224
  • 4
  • 27
  • 36
  • Possible duplicate: http://stackoverflow.com/questions/24870327/gulp-ruby-sass-unable-to-import-files – cimmanon Aug 28 '15 at 12:43
  • This is not a duplicate question because in the example provided, the developer uses gulp-ruby-sass which is different to gulp-sass in that this variant does not use ruby but instead uses libsass — a re-implementation of Sass in C++. – Timidfriendly Aug 28 '15 at 14:41
  • The fact that the language the Sass compiler was written in is irrelevant, does the solution work? – cimmanon Aug 28 '15 at 14:51
  • btw. Thanx for your helping out. But the reason the implementation does matter is because the feature support is different. As far as I can make out, load_path — as a gulp option — is not supported. I need to figure out a way around this current limitation. – Timidfriendly Aug 29 '15 at 05:46

1 Answers1

27

After struggling with this myself I found a option in gulp-sass :

sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})

Example:

var gulp = require('gulp'),
    sass = require('gulp-sass')
    notify = require("gulp-notify");

var config = {
    sassPath: './resources/sass',   // store the sass files I create
    bowerDir: './bower_components'
}

gulp.task('css', function() {
  return gulp.src(config.sassPath + '/style.scss')
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: [
            './resources/sass',
            config.bowerDir + '/bootstrap-sass/assets/stylesheets',
            config.bowerDir + '/font-awesome/scss']
        })
       .on("error", notify.onError(function (error) {
            return "Error: " + error.message;
        })))
    .pipe(gulp.dest('./public/css'));
});
Mrunal Kanti Roy
  • 453
  • 8
  • 13