Gulp scss почему ошибка при компиляции с вложенными элементами?

Question

[Magtir]

Здравствуйте

Пока элементы в файле scss не вложены, то все хорошо, только делаю что-то вроде такого

body {
margin: 0;

a {
margin: 0;
}
}

то ошибка

events.js:183
throw er; // 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)

может кто-то сможет подсказать в чем проблема?

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
});

надеюсь модерация код не съест

Answer 1

[Alexander Pushkarev]

Неправильный порядок выполнения, сначала надо sass()

Как-то так (может не работать, не тестил)

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));
});

Код из старого проекта

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!'))
);

Comments

[Magtir]

спасибо огромное! Вот при огромное спасибо!!!)!)