Gulp 自动前缀程序不添加供应商前缀

rryofs0p  于 2022-12-16  发布在  Gulp
关注(0)|答案(1)|浏览(202)

任务如下:

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

我使用的是标准的autofrefixer插件(不是gulp-autofrefixer,它在我使用的上一个task-runner上基本上做了同样的事情),但是它只添加了-webkit-前缀。flex,但它没有添加供应商前缀。我尝试将该行更改为

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

但那也不行,有什么问题吗?
--修正--我认为其他一些插件也使用了自动前缀,它扰乱了我的配置。我修正它的方法是在我的package.json文件的底部添加这个

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

在devDependencies的最后一个大括号后面添加一个逗号

mbjcgjjk

mbjcgjjk1#

Flex得到了很好的支持,所以你可能不再需要它了(autofrefixer在默认情况下暂时不再给属性添加前缀了a-请检查我可以使用吗)。但是如果你真的需要它,你可以按照以下步骤操作:

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

相关问题