Как подружить postcss и scss?

Question

[nepster-web]

Хочу подружить postcss и scss. Конкретно интересует работа cssnext.io и scss вместе.

Для сборки я использую gulp. Есть файл build.scss, который подключает все необходимые файлы:

/* ---------------------- */
/* == Base
/* ---------------------- */
@import "base/_settings.scss";
@import "base/_mixins.scss";
@import "base/_base.scss";
@import "base/reset.min";
@import "base/main.scss";


/* ---------------------- */
/* == States
/* ---------------------- */
@import "states/abstract.scss";


/* ---------------------- */
/* == Layouts
/* ---------------------- */
@import "layouts/header.scss";
@import "layouts/footer.scss";

...

После чего этот файл поддается обработке в gulp:

gulp.task('styles:build', function(callback) {
    return gulp.src(params.src.style)
        .pipe(sourcemaps.init())
        .pipe(postcss([
            cssnext
            // plugins
        ], { syntax: syntax }))
        .pipe(rename("styles.css"))
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(params.build.dev.css));
});

Проблема в том, что если разместить postcss([cssnext]) перед компиляцией scss он будет работать только с файлом build.scss, при этом все подключенные файлы обрабатываться не будут.

А если разместить postcss([cssnext]) после компиляции scss, то css файл на выходе будте правильно обрабатываться, но при этом scss будет ругаться на синтаксис функций nextcss, например color(red blackness(80%)) (функция просто взята для примера).

Подскажите пожалуйста как это дело можно подружить ?

Answer 1

[Дмитрий Кравченко]

Postcss import

Comments

[nepster-web]

Ну теперь другая проблема, nextcss ругается на весь синтаксис scss

[Дмитрий Кравченко]

если у вас немного кода, я предложу отказаться от scss в пользу precss

[nepster-web]

Дмитрий Кравченко: пробовал, все-же отказался в пользу scss. Там более привычный синтакксис и хорошая подсветка. В шторме, пока с постцсс проблемы. Вроде все решилось

gulp.task('styles:build', function(callback) {
    return gulp.src(params.src.style)
        .pipe(sourcemaps.init())
        .pipe(postcss([
            cssnext
        ], { parser: syntax }))
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: ['last 7 versions'] })
        ]))
        .pipe(rename("styles.css"))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(params.build.dev.css));
});

[nepster-web]

Дмитрий Кравченко: однако теперь таже самая проблема с Stylelint. Ругается на синтаксис scss:

gulp.task('styles:verify', function(callback) {
    return gulp.src('src/css/**/*.scss')
        .pipe(postcss([
            cssnext
        ], { parser: syntax }))
        .pipe(gulpStylelint({
              failAfterError: false,
              reportOutputDir: 'reports/lint',
              reporters: [
                {formatter: 'verbose', console: true},
                {formatter: 'json', save: 'report.json'},
              ],
              debug: true
          }));
});