webpack2 使用postcss插件autoprefixer不生效

我时个新手,最近在学习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>

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

阅读 8.5k
3 个回答

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

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

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

新手上路,请多包涵

根据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.
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏