webpack5中使用autoprefixer不生效

sifu in 杭州

2021-05-28 Friday

webpack
autoprefixer

# 一、官方文档指导下配置（不生效）

webpack.config.js

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12

postcss.config.js

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

1
2
3
4
5

# 二、解决方案

方式一：package.json 加入以下浏览器配置列表

{
  "browserslist": [
    "last 2 version",
    ">1%",
    "ios 7"
  ]
}

1
2
3
4
5
6
7

方式二：新增 .browserslistrc

last 2 version
>1%
ios 7

1
2
3

# 三、总结

Autoprefixer 需要根据支持的浏览器决定是否要加前缀做兼容。