gulp没有编译scss

Question

为什么他没有看到bootstrap类？ 如果我删除所有@extend正常工作

Error: ".navbar" failed to @extend "navbar-light".
   The selector "navbar-light" was not found.
   Use "@extend navbar-light !optional" if the extend should be able to fail.
    on line 11 of app/styles/app.scss
>>   @extend navbar-light;
   --^

  

    

app.scss

  

没有看到@extend bootstrap类，但为什么？ （如果我删除了所有@extend，正常编译的bootstrap样式）

@import 'bootstrap/scss/bootstrap';
@import 'fotorama/fotorama';


.navbar {
  color: red;
  @extend navbar-light;
  @extend bg-faded;
}

我的gulp任务

var sassPaths = [
'node_modules'
];

gulp.task('styles', () => (
gulp.src(['app/styles/app.scss'])
    .pipe(sass({
        includePaths: sassPaths,
        errLogToConsole: true,
        indentedSyntax: false
    }))
    .pipe(rename({suffix: '.min', basename: 'app'}))
    .pipe(gulp.dest('dist/assets/styles'))
));