I'm trying to pass in an array of directories containing Sass files to be compiled into a single CSS file. The array of directories looks like the correct approach but I'm getting an error message as follows:
Individual stylesheets must be in the sass directory.
[09:54:41] Plumber found unhandled error:
Error in plugin 'gulp-compass'
Message:
Compass failed
My guplfile.js is as follows:
var gulp = require('gulp'),
compass = require('gulp-compass'),
watch = require('gulp-watch'),
notify = require('gulp-notify'),
debug = require('gulp-debug'),
plumber = require('gulp-plumber'),
sourcemaps = require('gulp-sourcemaps'),
runSequence = require('run-sequence');
var config = {
sass: {
files: [
'css/**/*.scss',
'../mytheme/css/**/*.scss'
],
includePaths: [
'node_modules'
],
outputStyle: {
watch: 'expanded',
},
outputPath: 'build/css'
}
};
gulp.task('sass', function () {
return gulp.src(config.sass.files)
.pipe(plumber())
.pipe(debug({title: 'Debug:'}))
.pipe(compass({
sass: 'css',
css: config.sass.outputPath,
debug: true,
import_path: config.sass.includePaths,
style: config.sass.outputStyle.watch,
sourcemap: true
}))
.pipe(sourcemaps.write())
.pipe(notify('Compiled: <%= file.relative %>!'));
});
/**
* Default task
*/
gulp.task('default', ['watch']);
if I remove the second location in the files array, then gulp compiles without issue. So it's just how to allow that second location to be compiled - assume I need to do something more with sass: 'css' and/or css: config.sass.outputPath.
Any help greatly appreciated.