Error importing sass partials with gulp

I hope you understand me and can help me, I have that structure in a project I'm working with Gulp, gulp-sass, browser-Sync; it is assumed that sass the document says that you can create partials by adding the underline so that you can import but it is not compiled in a separate css file so I am doing that, creating a _variables.scss file and my main file is main.scss, everything runs normally I make a change and my browser is refreshed thanks to browser-sync but something strange happens that if I make two or three changes in that file _variables.scss what is compiling normal as seen in the console image it starts to leave an error that does not find the imported file .. how do I want to import in that way.

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

// Task BrowserSync
gulp.task('serve',['sass'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch('scss/**/*.scss', ['sass']);
    gulp.watch('app/*.html').on('change', browserSync.reload);
});


// Task compile sass
gulp.task('sass', function() {
    return gulp.src('scss/main.scss')
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.stream())
});