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

首先我使用了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:
clipboard.png
less可以正常编译为css,目前想使用autoprefixer,已经npm了autoprefixer包,上面的配置文件也写了,但是没有效果,是不是那里配置错了?

回答:

你用的是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'] })]
            }
        }

官方文档

回答:

postcss: [
    require('autoprefixer')
]

试试

回答:

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

回答:

参数扔到postcss.config.js里面

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注