gulp sass watch task @import issue -

i wanted try gulp sass , run problems. have following sass directory:

main.scss //all custom styling mixins.scss //custom mixins variables.scss //custom variables style.scss //file imports above bootstrap , fontawesome 

when run gulp, compiles , there no errors, correct sytle.min.css styling included. change 1 of watched files (main.scss || mixins.scss || variables.scss) 1 of following errors: "undefined variable", "no mixin named ..." accordingly.

also if change , save main.scss no errors none of custom scss files included css, bootstrap fontawesome compiled.

what wrong setup?

gulpfile.js

var gulp = require('gulp'),     sass = require('gulp-sass'),     notify = require("gulp-notify"),     concat = require('gulp-concat'),     minifycss = require('gulp-minify-css'),     uglify = require('gulp-uglify'),     rename = require('gulp-rename')     bower = require('gulp-bower')     merge = require('merge-stream')     watch = require('gulp-watch');  var config = {     destpath: './dist',     sasspath: './src/sass',     jspath: './src/js',     bowerdir: './src/components' }  gulp.task('bower', function() {     return bower()     .pipe(gulp.dest(config.bowerdir)); });  gulp.task('icons', function() {     var fontawesome = gulp.src(config.bowerdir + '/font-awesome/fonts/**.*')     .pipe(gulp.dest('./src/fonts'));      var bootstrap = gulp.src(config.bowerdir + '/bootstrap-sass/assets/fonts/bootstrap/**.*')     .pipe(gulp.dest('./src/fonts/bootstrap'));      return merge(fontawesome, bootstrap); });   gulp.task('sass', function() {     console.log(config.sasspath);     var stream = gulp.src([config.sasspath + '/style.scss'])         .pipe(sass().on('error', sass.logerror))         // .pipe(concat('style.css'))         .pipe(minifycss())         .pipe(rename('style.min.css'))         .pipe(gulp.dest(config.destpath));     return stream; });  gulp.task('js', function() {     var stream = gulp.src([config.bowerdir + '/jquery/dist/jquery.js', config.bowerdir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jspath + '/*.js'])         .pipe(concat('script.js'))         .pipe(uglify())         .pipe(rename('script.min.js'))         .pipe(gulp.dest(config.destpath));      return stream; });  gulp.task('watch', function(){     watch([config.sasspath + '/*.scss'], function(event, cb) {         gulp.start('sass');     });     watch([config.jspath + '/*.js'], function(event, cb) {         gulp.start('js');     }); });  gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']); 

style.scss

@import "./variables.scss"; @import "./mixins.scss"; @import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss"; @import "../components/font-awesome/scss/font-awesome.scss"; @import "./main.scss"; 

ok, fixed adding timeout watch task before calling sass task:

watch([config.sasspath + '/*.scss'], function(event, cb) {     settimeout(function(){         gulp.start('sass');     }, 1000); }); 

it's either ide (sublime 2) on save delay or server ping problem.