stylesheets must be in the sass directory error with gulp-compass

Question

I'm converting a grunt project to gulp, and am having problems with gulp-compass.

We have scss files spread out in the source rather all in a single directory. That structure is important for this project and can't change.

I figured I'd try to setup the config the same way I'd do the grunt project, but a) I'm confused why it's expecting a single directory that has nothing to do with the actual gulp.src path, and b) I can't get it working anyway.

// Compass
gulp.task('compass:dev', function() {
    return gulp.src(appPath + '/**/*.scss')
        .pipe(compass({
            project: path.join(__dirname, rootPath),
            css: distPath + '/css',
            sass: appPath + '/'
        }))
        .pipe(gulp.dest(distPath + '/css'));
});

The error is:

[17:02:20] Starting 'compass:dev'...
[17:02:21] Individual stylesheets must be in the sass directory.


events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: Compass failed

Answer 1

After a lot of toying around, I finally was able to get this to work with the add_import_path option:

// Compass
gulp.task('compass:dev', function() {
    return gulp.src(appPath + '/**/*.scss')
        .pipe(plugins.compass({
            css: distPath + '/css',
            sass: path.join(__dirname, appPath) + '/',
            add_import_path: path.join(__dirname, appPath) + '/'
        }))
        .pipe(gulp.dest(distPath + '/css'));
});