Laravel Autoprefixer 在 webpack 中不起作用答案

【问题标题】：Laravel Autoprefixer not working within webpackLaravel Autoprefixer 在 webpack 中不起作用
【发布时间】：2019-12-15 07:56:19
【问题描述】：

当我运行命令npm run production 时，我的style.css 没有css 前缀。我正在使用：

Laravel：5.6.39 & Laravel-mix：4.1.2

文件webpack.mix.js：

mix.sass('resources/assets/sass/style.scss', 'public/css').options({
    postCss: [
       require('autoprefixer')({
          browsers: ['last 40 versions'],
             grid: true
          })
    ]
});

文件style.scss

img {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

输出文件style.css:

img{
   transform: translate(-50%,-50%)
}

如何将css-prefix添加到输出文件style.css？

【问题讨论】：

先尝试使用选项，然后再尝试使用mix.css，如文件github.com/getkirby/getkirby.com/blob/… 中所示，看看是否有帮助

标签： php html css laravel-5 sass

【解决方案1】：

我已经解决了。只需在前缀前移动原点transform。

img {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

改为：

img {
    transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);   
}

它成功了！

【讨论】：