Autoprefixer 没有添加前缀？

Question

在 PostCSS 中使用 Autoprefixer 发现没有给我添加前缀，然后...

两种解决方案：

方案一

无论使用 postcss.config.js 等配置文件还是直接在 webpack.config.js 中使用 Autoprefixer，都需要设置 browserslist 才会帮你添加前缀。

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ],
          }
        }]
      }
    ]
  }
}

// package.json
{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}

或者添加配置文件 .browserslistrc

# Browsers that we support

last 2 versions
> 1%
iOS 7
last 3 iOS versions

2. 方案二（不推荐）

在 postcss.config.js 配置文件添加 browsers 选项，但是这种方式，Autoprefixer 不提倡这种写法，会导致一些错误。

建议使用方案一解决，否则项目构建时会有警告：

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist
https://twitter.com/browserslist

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['defaults', 'not ie < 11', 'last 2 versions', '> 1%', 'iOS 7', 'last 3 iOS versions']
    })
  ]
}