Watch multiple directories using gulp-sass - path

Question

I have .scss files in two different directories:
./blog/styles/
./common/styles/
There is a file in ./blog/styles called blog.scss and I'm importing .scss files from ./blog/styles/ (i.e. same directory) and ./common/styles/.
How should I create gulp task to watch both these directories and create final .css files somewhere else (say in ./dist)?
This is my current task:
gulp.task('sass', function () {
gulp.src(['./blog/styles/*.scss', './common/styles/*.scss'])
.pipe(sass())
.pipe(gulp.dest('./dist/style.css'));
});
I'm importing files in blog.scss only using the name like this:
#import "forms"; //from the same directory
#import "_mixins"; //from ./common/styles
#import "_common"; //from ./common/styles
Right now I'm getting the following error:
file to import not found or unreadable: _mixins
As it seems it can't see .scss files inside ./common/styles directory...

Answer 1

You need to provide the relative path to the sass files that you're importing. So change the import code to be something like this:
#import "forms";
#import "../../common/styles/_mixins";
#import "../../common/styles/_common";
Then, since you are importing the files from ./common/styles you should only need gulp to target the scss file in ./blog/styles. So your gulp function could look something like this:
gulp.task('sass', function() {
gulp.src('./blog/styles/blog.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/style.css'));
});

Answer 2

You could also use sass load paths for this.
Rather than have relative paths in your blog.scss, you set your gulp task to have a load path pointing to your common/styles directory and just call the partial imports as you had done originally.
The compiler task will look inside the current src directory for the imports and then look in the load paths.