构建系统中的样式表导入错误

Question

我不知道为什么，但这种不规则性总是发生在我的Yeoman构建系统中。在我的Gulpfile.js中，所有.scss个文件将被监视的目录位于app/styles/**/*.scss。我使用的策略是：我链接到HTML文件的唯一编译样式表是main.scss，其他.scss文件已经导入。因此，在编译完成后，只会链接main.css。

main.scss

@import 'base';

@import '_banner';
@import '_works';
@import '_design';
@import '_story';
@import '_contact';

以下是样式表所在文件夹内容的图像：

问题是，每当我对我的.scss个文件中的一个进行更改时，它都会抛出一个错误，指向导入错误;但是当我尝试再次进行一些更改时，编译成功。

在我的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}));
});

这是某种错误吗？我该怎么做才能防止这种情况再次发生？