PostCSS Autoprefixer不为IE11添加Grid前缀的配置调整咨询

我之前也碰到过类似的Autoprefixer不生成-ms-grid前缀的情况，结合你的配置细节，咱们从这几个关键方面调整：

1. 移除命令行的浏览器覆盖参数 #

你的prefix-css脚本里用了-b "last 5 versions"，这个参数会优先覆盖package.json里的browserslist配置，而"last 5 versions"的规则并不明确包含IE11（尤其是Autoprefixer 9.x版本的规则解析逻辑）。

修改package.json里的prefix-css脚本，去掉-b参数：

"prefix-css": "postcss --use autoprefixer css/style.comp.css -o css/style.prefix.css"

2. 明确指定IE11在browserslist中 #

虽然你的browserslist写了not ie < 11，但为了让Autoprefixer更精准识别目标浏览器，建议直接显式添加ie 11：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "ie 11"
]

3. 确认标准Grid语法与PostCSS配置匹配 #

你当前的postcss.config.js写法是正确的，grid: true确实会触发IE11旧版Grid规范的前缀转换。但要确保你的SCSS代码使用的是标准Grid语法，比如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

Autoprefixer会自动将其转换为IE11兼容的-ms-grid写法，示例输出：

.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

4. 优化依赖版本兼容性 #

你的Node 8.9.4和npm 5.6.0与Autoprefixer 9.7.3是兼容的，但可以尝试把postcss-cli更新到适配的7.x版本（9.x的Autoprefixer搭配postcss-cli 7.x稳定性更好），执行命令：

npm install postcss-cli@7.1.0 --save-dev

验证步骤 #

修改完所有配置后，重新执行npm run build-css，打开css/style.prefix.css文件，就能看到生成的-ms-grid相关前缀了。

内容的提问来源于stack exchange，提问作者Jan