stylesheet import error in build system - sass

Question

I don't know why but this irregularity always happens in my Yeoman build system. In my Gulpfile.js, the directory where all .scss files will be watched is in app/styles/**/*.scss. The strategy I used is: the only compiled stylesheet that I would link to HTML file is the main.scss, where the other .scss files are already imported to. So when the compilation is done, only the main.css will be linked.
main.scss
#import 'base';
#import '_banner';
#import '_works';
#import '_design';
#import '_story';
#import '_contact';
Here is the image of the content of the folder where the stylesheets are located:
The problem is, every time I make changes to one of any of my .scss files, it throws an error that refers to importing error; but when I try to make some changes again, the compilation is successful.
In my Gulpfile.js:
gulp.task('styles', () => {
return gulp.src('app/styles/main.scss')
.pipe($.plumber())
.pipe($.if(dev, $.sourcemaps.init()))
.pipe($.sass.sync({
outputStyle: 'compressed',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.if(dev, $.sourcemaps.write()))
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Is this some kind of a bug? What should I do to prevent this from happening again?