Question

这是任务：

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%'}]))

但这也不起作用，它有什么问题？

- 修正 - 我认为其他一些插件也使用autoprefixer而且它正在弄乱我的配置。我修复它的方法是在package.json文件的底部添加它

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

在devDependencies的最后一个花括号之后用逗号添加它

Answer 1

Flex得到了很好的支持，所以你可能不再需要它了（autoprefixer暂时不再为该属性添加前缀了一段时间 - 我可以使用检查）。但如果你真的需要它，你可以采取以下步骤：

假设您的工作目录中有css个文件夹和dist文件夹。
在工作目录的根目录下创建 .browserslistrc 文件，并将last 4 versions放入其中。
在您的终端中运行postcss css/styles.css -u autoprefixer -o dist/styles.css

Autoprefixer不添加供应商前缀

1 个答案: