import dartSass from 'sass';

import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass);

...

gulp.src(srcDir)

  .pipe(sass({outputStyle: 'compressed'}))

first initialize npm

npm init

then install these dependencies ↓↓↓

npm install gulp gulp-sass node-sass gulp-concat --save-dev

Create gulpfile.js and add this code snippet:

'use strict';

var gulp = require('gulp');

var sass = require('gulp-sass');

var concat = require('gulp-concat');

sass.compiler = require('node-sass');

gulp.task('sass', function () {

   return gulp.src('./sass/**/*.scss')

   .pipe(concat('custom.scss'))

   .pipe(sass().on('error', sass.logError))

   .pipe(gulp.dest('./dist/'));

});

Add your gulp task to package.json

"scripts": {

   "scss": "gulp sass"

},

run the following command and you finally get all your .scss files in every subdirectory compiled into one single .css file:

npm run scss

npm install sass gulp-sass --save-dev