postcss-loader自动添加CSS3前缀失败

问题描述

用post-loader中的‘autoprefixer’自动添加css前缀失败

实现过程

安装postcss-loader和autoprefixer

npm install  postcss-loader postcss autoprefixer -D

新建postcss.config.js文件

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

webpack.config.js

  module: {
    rules: [
      {
        test: /\.scss$/,
        // 执行顺序：从右往左
        use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
      }
    ]
  }

打包后的结果：CSS3前缀未添加成功

Xnip2020-09-14_16-44-09.jpg

产生原因

package.json文件中缺少对浏览器兼容定义

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

添加browserslist后可成功自动添加前缀

Xnip2020-09-14_16-43-34.jpg