gulp-sass : combine multiple scss into one scss file

Question

I am using gulp npm package to bundle the scss files into one single scss file in angular 13. I am facing issues like,

Error: Can't find stylesheet to import. ╷ 1 │ @use '@angular/material' as mat;

Code:

gulp = require('gulp');
sass = require('gulp-sass')(require('sass'));
combine = require('gulp-scss-combine');
concat = require('gulp-concat');
browserSync = require('browser-sync').create();

// the default task
gulp.task('default', function () {
  return gulp.src('./lib/src/lib/theming/prebuilt/internal.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('test-internal.scss'))
    .pipe(gulp.dest('./dist/lib/theming/'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

In the internal.scss file there are lot imports there to other scss files. The ultimate goal is to process the internal.scss file and generate all the scss styles in one file that is (test-internal.scss).

Previously i had used scss-bundle and bundle-scss npm package but they are not working after angular 12 migration.