AEM Simple Gulp SASS

gulpfile.js

var gulp             = require('gulp');
var sass             = require('gulp-sass');
var postcss          = require('gulp-postcss');
var autoprefixer     = require('autoprefixer');
var sourcemaps       = require('gulp-sourcemaps');
var app              = 'ui.apps/src/main/content/jcr_root/apps/__YOURappName__/';

function styles() {
  return gulp.src([app+'**/*.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer({ browsers: ['last 2 versions','ie >= 10'] }) ]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(app));
};

gulp.task('default', styles);

package.json

{
  "name": "SCSS in AEM",
  "version": "1.0.0",
  "description": "SCSS to CSS in aem",
  "main": "gulpfile.js",
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "gulp": "^4.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4"
  }
}