Autoprefixer не добавляет префиксы вендоров

Вот задача:

gulp.task('process-css', function(){
  return gulp.src('./app/css/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([postcssMixins, postcssCalc, postcssSimpleVars, postcssColor, postcssExtend, postcssNesting, autoprefixer])) 
    .on('error', function(errorHandler){
      console.log(errorHandler.toString());
      this.emit('end');
    })
    .pipe(concatCSS('style.css'))
    .pipe(gulp.dest('./app/css/'));
});

Я использую стандартный плагин autoprefixer (не gulp-autoprefixer, который в основном делал то же самое с последним средством запуска задач, которое я использовал), но он добавляет только префикс -webkit-. Я пробовал использовать такие свойства, как clip-path и display: flex, но он не добавляет префиксы поставщиков. Я попытался изменить строку на

 .pipe(postcss([
 postcssMixins, postcssCalc, postcssSimpleVars,
 postcssColor, postcssExtend, postcssNesting,
 autoprefixer([{browsers: '> 0%'}])) 

но это тоже не сработало, что с этим не так?

- Исправлено - я думаю, что некоторые другие плагины тоже используют автопрефиксер, и это мешало моим конфигам. Я исправил это, добавив это в конец моего файла package.json.

"browserslist": [
    "> 0%",
    "last 2 versions"
  ]

Добавьте его через запятую после последней фигурной скобки для ваших devDependencies


person wdGelwix    schedule 21.03.2018    source источник


Ответы (1)


Flex очень хорошо поддерживается, поэтому, вероятно, он вам больше не нужен (autoprefixer некоторое время больше не добавляет префиксы к свойству по умолчанию - проверьте, могу ли я использовать). Но если вам это действительно нужно, вы можете сделать следующие шаги:

  • Допустим, у вас есть css папка и dist папка для ваших стилей в вашем рабочем каталоге.
  • создайте файл .browserslistrc в корне рабочего каталога и поместите в него last 4 versions.
  • запустите postcss css/styles.css -u autoprefixer -o dist/styles.css в своем терминале
person daGo    schedule 04.06.2018