此时需要两个包 postcss-loader autoprefixer 安装 npm install postcss-loader autoprefixer -D 使⽤ module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’ // 添加这⼀⾏，注意添加的顺序 ] }, ] } 此时运⾏ webpack 会报错：’No PostCSS Config found’，原因是 PostCSS 需要⼀个配置， ⽤来设置 autoprefixer 的设置标准（即需要指定兼容哪些浏览器） 解决：添加 PostCSS 的配置 - 在项⽬根⽬录下添加 postcss.config.js module.exports = { plugins: [ require(‘autoprefixer’) ] }

指定兼容规则

有两种指定⽅式，⼆选⼀即可： 详情查看：https://www.npmjs.com/package/browserslist

1. 可以在 package.json 中指定（推荐）

“browserslist”: [ “last 1 version”, // 最后的⼀个版本 “> 1%” // 代表全球超过 1% 使⽤的浏览器 ]

2. 在项⽬根⽬录下创建 .browserslistrc

# Browsers that we support last 1 version > 1% 更多查询条件 > 5%: 基于全球使⽤率统计⽽选择的浏览器版本范围。>=,<,<=同样适⽤。> 5% in US : 同上，只是使 ⽤地区变为美国。⽀持两个字⺟的国家码来指定地区。 > 5% in alt-AS : 同上，只是使⽤地区变为亚洲所有国家。这⾥列举了所有的地区码。 > 5% in my stats : 使⽤定制的浏览器统计数据。 cover 99.5% : 使⽤率总和为99.5%的浏览器版本，前提是浏览器提供了使⽤覆盖率。 cover 99.5% in US : 同上，只是限制了地域，⽀持两个字⺟的国家码。 cover 99.5% in my stats :使⽤定制的浏览器统计数据。 maintained node versions :所有还被 node 基⾦会维护的 node 版本。 node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。 current node :当前被 browserslist 使⽤的 node 版本。 extends browserslist-config-mycompany :来⾃browserslist-config-mycompany包的查询设置 ie 6-8 : 选择⼀个浏览器的版本范围。 Firefox > 20 : 版本⾼于20的所有⽕狐浏览器版本。>=,<,<=同样适⽤。 ios 7 :ios 7⾃带的浏览器。 Firefox ESR :最新的⽕狐 ESR（⻓期⽀持版） 版本的浏览器。 unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。 last 2 major versions or last 2 ios major versions :最近的两个发⾏版，包括所有的次版本号和补 丁版本号变更的浏览器版本。 since 2015 or last 2 years :⾃某个时间以来更新的版本（也可以写的更具体since 2015-03或者 since 2015-03-10） dead :通过last 2 versions筛选的浏览器版本中，全球使⽤率低于0.5%并且官⽅声明不在维护或者事 实上已经两年没有再更新的版本。⽬前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。 last 2 versions :每个浏览器最近的两个版本。 last 2 Chrome versions :chrome 浏览器最近的两个版本。 defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。 not ie <= 8 : 浏览器范围的取反。 可以添加 not 在任和查询条件前⾯，表示取反