Bundle vendor CSS with compiled SCSS to create one CSS file using Gulp 4 - gulp

Question

I have already compiled css files for external libraries like bootstrap, datatable etc. inside a css folder. These files will never be changed at any point so I don't want to compile their scss files and build out every time, hence the use of their css version.
However, I have a scss folder where all the styles for the application are written. What I want to achieve is, every time a change is made to a scss file, compile the scss and generate a css and then bundle this css with the two vendor css files (bootstrap, datatable) to create one single stylesheet and copy it over to the bundles folder.
wwwroot
--- bundles
--- css
--- bootstrap.css, datatables.css
--- js
--- scss
--- components
--- comp1.scss
--- comp2.scss
--- layout
--- header.scss
--- footer.scss
--- main.scss
const {src,dest,watch,series,parallel} = require('gulp');
const sass = require('gulp-sass')(require('sass')),
prefix = require('gulp-autoprefixer'),
minify = require('gulp-clean-css'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
function compileScss() {
return src('wwwroot/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true
}))
.pipe(prefix())
.pipe(sourcemaps.write('.'))
.pipe(dest('wwwroot/css/'));
}
function cssBundle() {
return src([
'wwwroot/css/bootstrap.min.css',
'wwwroot/css/dataTables.css',
'wwwroot/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(dest('wwwroot/bundles/'));
}
function watchTask() {
watch('wwwroot/scss/**/*.scss',
parallel(compileScss));
}
exports.default = series(
parallel(compileScss),
cssBundle,
watchTask
);
The above code works fine first time when I run the >gulp command but any subsequent changes I make to scss files only work as far as compiling and generating the main.css and not bundling with the other two files as watch task continues to run in the background.
Just wondered how I can tell the task to compile the scss, then bundle with the vendor files and copy to the bundles folder every time a change is made to scss.
Thanks in advance