backport the SCSS processing

build/gulp/scss.js

+/*
+ * Copyright (c) by the ACP3 Developers.
+ * See the LICENSE file at the top-level module directory for licensing details.
+ */
+
+module.exports = (gulp, plugins) => {
+    'use strict';
+
+    const autoprefixer = require('autoprefixer');
+    const sass = require('gulp-sass');
+    sass.compiler = require('node-sass');
+
+    return () => {
+        return gulp
+            .src(
+                [
+                    './ACP3/Modules/*/*/Resources/Assets/scss/style.scss',
+                    './designs/*/*/Assets/scss/*.scss',
+                    './designs/*/Assets/scss/*.scss',
+                    './installation/design/Assets/scss/*.scss',
+                    './installation/Installer/Modules/*/Resources/Assets/scss/style.scss'
+                ],
+                {base: './'}
+            )
+            .pipe(plugins.plumber())
+            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+            .pipe(plugins.postcss([autoprefixer()]))
+            .pipe(plugins.rename((path) => {
+                path.dirname = path.dirname.substring(0, path.dirname.length - 4) + 'css';
+                path.basename += '.min';
+            }))
+            .pipe(gulp.dest('./'));
+    };
+};

build/gulp/watch.js

@@ -7,17 +7,21 @@ module.exports = (gulp) => {
     'use strict';
 
     return () => {
-        // Watch all the .less files, then run the less task
         return gulp.watch(
             [
                 'ACP3/Modules/*/*/Resources/Assets/less/**/*.less',
                 'designs/*/**/Assets/less/*.less',
                 'designs/*/**/Assets/less/**/*.less',
                 'installation/design/Assets/less/*.less',
-                'installation/Installer/Modules/*/Resources/Assets/less/style.less'
+                'installation/Installer/Modules/*/Resources/Assets/less/style.less',
+                'ACP3/Modules/*/*/Resources/Assets/scss/**/*.scss',
+                'designs/*/**/Assets/scss/*.scss',
+                'designs/*/**/Assets/scss/**/*.scss',
+                'installation/design/Assets/scss/*.scss',
+                'installation/Installer/Modules/*/Resources/Assets/scss/style.scss'
             ],
             {cwd: './'},
-            gulp.series('less')
+            gulp.series('less', 'scss')
         );
     };
 };

gulpfile.js

@@ -15,8 +15,9 @@
 
     gulp.task('copy', getTask('copy'));
     gulp.task('bump-version', getTask('bump-version'));
+    gulp.task('scss', getTask('scss'));
     gulp.task('less', getTask('less'));
-    gulp.task('watch', gulp.series('less', getTask('watch')));
+    gulp.task('watch', gulp.series('less', 'scss', getTask('watch')));
 
     gulp.task('default', gulp.series('watch'));
 })();

package.json

@@ -30,6 +30,8 @@
     "gulp-plumber": "^1.2.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "node-sass": "^4.11.0",
     "semver": "^5.6.0",
     "simple-git": "^1.107.0",
     "yargs": "^13.2.1"