Gulp + SASS + BrowserSync don’t work on newly created partials

Question

I’m using a pretty simple setup for Gulp with SASS and BrowserSync.

//require plugins here

// Paths

var styleSRC = './assets/css/style.scss'; // Path to main .scss file.
var styleDestination = './  '; 
var styleWatchFiles = './assets/css/**/*.scss'; 


// BrowserSync
gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: projectURL,
        open: false,
        injectChanges: true  
    });
});


//Task

gulp.task('styles', function () {
    gulp.src(styleSRC)
        .pipe(sass({
            errLogToConsole: true,
        }))
        .on('error', console.error.bind(console)).pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(gulp.dest(styleDestination))
        .pipe(browserSync.reload({
            stream: true
        }));
});

// Watch
gulp.task('default', ['styles', 'browser-sync'], function () {
    gulp.watch(styleWatchFiles, ['styles']); 
});

The issue is though this setup doesn’t recognize when new partial file is created. So if I create a partial and then add it to style.scss nothing is happening, Sass is not compiled -> so you have manually call the task from the console.

Is it possible to automatically compile Sass when new partial is added?

Answer 1

if you remove './' from the source path it will work the way you would expect it

as far as i know this is a windows only problem here is a github issue that describes the problem : https://github.com/gulpjs/gulp/issues/1422

should be fixed in gulp 4.x , but thats still in alpha