Gulp-sass - remove path of file

Question

I'm using gulp-sass to compile scss into css and have managed to get it working somewhat. At the moment this is the code i have setup in my gulp file:

gulp.task('sass', function () {
  gulp.src('./popup/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./build/css'))
});

The only issue I have is when it compiles into css files instead of just creating a index.css file in the dest ./build/css it appends a whole tree of folders that mirrors the tree where the file came from. So for example if one of my files lives in app\src\scripts\components\app\new-ticket\css then in the build folder will be the same tree: \src\scripts\components\app\new-ticket\css with the file in the last folder.

Is there a setting or a way I can remove the path in gulp-sass so i'm just left with build/css/index.css but keep the same path structure where the .scss files live?

Answer 1

Use another pipe to add concat. This function takes a destination file name to generate one css (or) js file.
Here is the code:

gulp.task('sass', function () {
  gulp.src('./popup/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('index.css'))
    .pipe(gulp.dest('./build/css'))
});