Autoprefixer 没有添加前缀？

[toFrankie]

在 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#readme 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']
    })
  ]
}