vuejs单文件组件，style标签样式怎么使用Autoprefixer呢？

Question

首先我使用了less，代码如下：

<style scoped lang="less" rel="stylesheet/less">
    .testUl{
        &{
            background-color:antiquewhite;
            display: flex;
        }
        li{
            height: 30px;
            line-height: 30px;
            color: black;
        }
    }
    .myDiv{
        &{
            color:#FF0000;
        }
        p{
            &:nth-of-type(2){
                font-size:30px;
            }
        }
    }
</style>

在工程文件里面配置了less-loader：

less可以正常编译为css，目前想使用autoprefixer,已经npm了autoprefixer包，上面的配置文件也写了，但是没有效果，是不是那里配置错了?

Answer 1

你用的是webpack1还是2，估计是2吧，2的话需要以下操作：
需要安装postcss-loader

var autoprefixer = require('autoprefixer');

   rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                // vue-loader options go here
                postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
            }
        }

官方文档

Answer 2

postcss: [
    require('autoprefixer')
]

试试

Answer 3

plugins:[
        new webpack.LoaderOptionsPlugin({
            options:{
                postcss:function(){
                    return [autoprefixer]
                }
            }
        })
    ],

Answer 4

参数扔到postcss.config.js里面