webpack2 使用postcss插件autoprefixer不生效

Question

我时个新手，最近在学习vue2，在使用postcss时插件不其作用，求达人指点迷津。

以下为代码：

## webpack.base.conf.js ##
{
    test:   /\.less$/,
    loader: "style-loader!css-loader!postcss-loader!less-loader"
}


## postcss.config.js ##

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

## vue组件 ##
<style lang='less' scoped>

@import '../../style/mixin.less';

aside{
    .position(fixed,0,0,auto,0);
    width: 180px;
    background-color:#1c2237;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    border-radius:3px;
}

</style>

运行后的该加前缀的都没有加上。

Answer 1

浏览器相关的配置没写，比如 ie>=8

Answer 2

vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。你这里写的是lang='less'，会采用less预处理器。如果使用postcss，Vue组件无需设置lang='less'，默认是使用postcss。建议下载 postcss-cssnext，默认包含了autoprefixer插件。

可以参考这里：从0到1搭建webpack2+vue2自定义模板详细教程 和 vue-webpack-template

Answer 3

根据browserslist在项目里的package.json里加上

"browserslist": [
    "iOS >= 8",
    "Android > 4"
  ]

即可。

最好不要写成autoprefixer的option

We recommend to avoid Autoprefixer option and use .browserslistrc config or package.json. In this case browsers will be shared with other tools like babel-preset-env or Stylelint.