Gulp scss why compilation error with nested elements?

Question

Sass

Hello
As long as the elements in the scss file are not nested, then everything is fine, I just do something like this

body {
margin: 0;

a {
margin: 0;
}
}

then the error is
events.js:183 thrower
; // Unhandled 'error' event
^
Error: /home/d_zelikov/project/static-new/frontend/scss/style.scss:4:7: property missing ':'
at error (/home/d_zelikov/project/static- new/node_modules/css/lib/parse/index.js:62:15)
at declaration (/home/d_zelikov/project/static-new/node_modules/css/lib/parse/index.js:224:33)
at declarations (/home/d_zelikov/project/static-new/node_modules/css/lib/parse/index.js:253:19)
at rule (/home/d_zelikov/project/static-new/node_modules/css/lib/parse/ index.js:561:21)
at rules (/home/d_zelikov/project/static-new/node_modules/css/lib/parse/index.js:118:70)
at stylesheet (/home/d_zelikov/project/static- new/node_modules/css/lib/parse/index.js:81:21)
at module.exports (/home/d_zelikov/project/static-new/node_modules/css/lib/parse/index.js:565:20)
at rework (/home/d_zelikov/project/static-new/node_modules/rework/ index.js:27:21)
at DestroyableTransform._transform (/home/d_zelikov/project/static-new/node_modules/gulp-concat-css/index.js:84:22)
at DestroyableTransform.Transform._read (/home/ d_zelikov/project/static-new/node_modules/readable-stream/lib/_stream_transform.js:184:10)
can someone tell me what the problem is?
package.json:

{
"name": "static-new",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-clean-css": "^3.10.0",
"gulp-concat-css": "^3.1.0",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

gulpfile.js:

let gulp         = require('gulp');
let sass         = require('gulp-sass');
let autoprefixer = require('gulp-autoprefixer');
let concatCss    = require('gulp-concat-css');
let cleanCSS     = require('gulp-clean-css');

let uglify       = require('gulp-uglify');

//paths
let scssFiles = 'frontend/scss/**/*.scss';
let cssDist = 'dist/css/';

let jsFiles = 'frontend/js/**/*.js';
let jsDist = 'dist/js/';

gulp.task('watch',function() {
    gulp.watch(scssFiles,['build-css']);
    gulp.watch(jsFiles,['build-js']);
});

gulp.task('build-css', function(){
    gulp.src(scssFiles)
        .pipe(autoprefixer({

            browsers: ['last 2 versions'],

            cascade: false

        }))
        .pipe(concatCss("style.css"))
        .pipe(cleanCSS())
        .pipe(sass())
        .pipe(gulp.dest(cssDist));
});

gulp.task('build-js', function() {

    gulp.src(jsFiles) //Найдем наш main файл
        .pipe(uglify()) //Сожмем наш js
        .pipe(gulp.dest(jsDist)) //Выплюнем готовый файл в build
});

I hope moderation will not eat the code

Answer 1

Wrong order of execution, you need to sass() first
Something like this (might not work, not tested)

gulp.task('build-css', function(){
    gulp.src(scssFiles)
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false

        }))
        .pipe(concatCss("style.css"))
        .pipe(cleanCSS())
        .pipe(gulp.dest(cssDist));
});

Code from an old project

gulp.task('sass', () =>
    gulp.src(variables.src.scss)
        .pipe(errorNotifier.handleError(sass()))
        .pipe(autoPrefixer({
            browsers: ['last 2 versions', 'safari 5', 'ie 11', 'opera 12.1', 'ios 6', 'android 4'],
            cascade: false
        }))
        .pipe(combineMq({
            beautify: true
        }))
        .pipe(gulp.dest(variables.public.css))
        .pipe(notify('Sass compile!'))
);