javascript - How to include css files with scss when compiling with gulp -

this gulpfile.babel.js:

'use strict';  import plugins  'gulp-load-plugins'; import yargs    'yargs'; import browser  'browser-sync'; import gulp     'gulp'; import rimraf   'rimraf'; import yaml     'js-yaml'; import fs       'fs';  // load gulp plugins 1 variable const $ = plugins();  // set local url project let url = 'sf.admin.lelo.com/';  // check --production flag const production = !!(yargs.argv.production);   // load settings settings.yml const { compatibility, port, paths } = loadconfig();  function loadconfig() {   let ymlfile = fs.readfilesync('config.yml', 'utf8');   return yaml.load(ymlfile); }  // build "dist" folder running of below tasks gulp.task('build',  gulp.series(clean, gulp.parallel(sass, cssvendors, javascript, javascriptloose, javascriptcustom, images, copy)));  // build site, run server, , watch file changes gulp.task('default',   gulp.series('build', server, watch));  // delete "dist" folder // happens every time build starts function clean(done) {   rimraf(paths.dist + "/assets", done); }  // copy files out of assets folder // task skips on "img", "js", , "scss" folders, parsed separately function copy() {   return gulp.src(paths.assets)     .pipe(gulp.dest(paths.dist + '/assets')); }  function cssvendors() {   return gulp.src(paths.cssvendors)       .pipe($.sourcemaps.init())       .pipe($.concat('vendors.css'))       .pipe($.if(production, $.uglify()           .on('error', e => { console.log(e); })       ))       .pipe($.if(!production, $.sourcemaps.write()))       .pipe(gulp.dest(paths.dist + '/assets/css')); }   // compile sass css // in production, css compressed function sass() {   return gulp.src('app/resources/private/scss/app.scss')     .pipe($.sourcemaps.init())     .pipe($.sass({       includepaths: paths.sass     })       .on('error', $.sass.logerror))     .pipe($.autoprefixer({       browsers: compatibility     }))     // comment in pipe below run uncss in production     //.pipe($.if(production, $.uncss(uncss_options)))     .pipe($.if(production, $.cssnano()))     .pipe($.if(!production, $.sourcemaps.write()))     .pipe(gulp.dest(paths.dist + '/assets/css'))     .pipe(browser.reload({ stream: true })); }  // combine javascript vendors strict syntax 1 file // in production, file minified function javascript() {   return gulp.src(paths.javascript)     .pipe($.sourcemaps.init())     .pipe($.babel())     .pipe($.concat('strict-app.js'))     .pipe($.if(production, $.uglify()       .on('error', e => { console.log(e); })     ))     .pipe($.if(!production, $.sourcemaps.write()))     .pipe(gulp.dest(paths.dist + '/assets/js')); }  // combine javascript vendors no strict syntax 1 file // in production, file minified, no babel function javascriptloose() {   return gulp.src(paths.loosejs)     .pipe($.sourcemaps.init())     .pipe($.concat('non-strict-app.js'))     .pipe($.if(production, $.uglify()       .on('error', e => { console.log(e); })     ))     .pipe($.if(!production, $.sourcemaps.write()))     .pipe(gulp.dest(paths.dist + '/assets/js')); }  // combine custom javascript code (strict) 1 file // in production, file minified, no babel function javascriptcustom() {   return gulp.src(paths.customjs)       .pipe($.sourcemaps.init())       .pipe($.concat('custom-app.js'))       .pipe($.if(production, $.uglify()           .on('error', e => { console.log(e); })       ))       .pipe($.if(!production, $.sourcemaps.write()))       .pipe(gulp.dest(paths.dist + '/assets/js')); }  // copy images "dist" folder // in production, images compressed function images() {   return gulp.src('app/resources/private/images/**/*')     .pipe($.if(production, $.imagemin({       progressive: true     })))     .pipe(gulp.dest(paths.dist + '/assets/images')); }  // start server browsersync preview site in function server(done) {   browser.init({     proxy: url   });   done(); }  // reload browser browsersync function reload(done) {   browser.reload();   done(); }  // watch changes static assets, pages, sass, , javascript function watch() {   gulp.watch(paths.assets, copy);   gulp.watch('app/resources/views/**/*.html.twig').on('all', gulp.series(browser.reload));   gulp.watch('app/resources/private/scss/**/*.scss').on('all', gulp.series(sass, browser.reload));   gulp.watch('app/resources/private/js/**/*.js').on('all', gulp.series(javascriptcustom, browser.reload));   gulp.watch('app/resources/private/img/**/*').on('all', gulp.series(images, browser.reload)); } 

i generating 2 css files 2 seperate functions, sass , cssvendors. include files concatenated vendors.css file app.css file. , before code of app.css.

how considering current gulpfile?