PostCSS Autoprefixer 不会为 Internet Explorer 11 添加网格前缀答案

【问题标题】：PostCSS Autoprefixer does not add grid prefixes for Internet Explorer 11PostCSS Autoprefixer 不会为 Internet Explorer 11 添加网格前缀
【发布时间】：2020-04-11 21:45:21
【问题描述】：

我们使用 sass 将 scss 文件编译为 css。我们希望支持 IE11，包括使用 -ms-grid 前缀的网格。为了达到这个目标，我们在 Windows 上使用 (npm) postcss autoprefixer。我们当前的 package.json 文件如下所示：

{
  "name": "project name",
  "version": "1.0.0",
  "description": "project description",
  "main": "index.js",
  "scripts": {
    "watch-sass": "node-sass scss/style.scss css/style.css --watch",
    "compile-sass": "node-sass scss/style.scss css/style.comp.css",
    "prefix-css": "postcss --use autoprefixer -b \"last 5 versions\" css/style.comp.css -o css/style.prefix.css",
    "compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build-css": "npm-run-all compile-sass prefix-css compress-css"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie < 11"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "compile-sass": "^1.0.3",
    "cross-env": "^6.0.3",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.3",
    "prefix-css": "0.0.6"
  }
}

除了那个文件之外，我们还在项目目录中保存了一个 postcss.config.js ，其中包含上述内容：

module.exports = {
    plugins: { autoprefixer: { grid: true } }
}

当我们现在运行build-css 脚本时，我们希望输出文件为 IE11 生成网格前缀。输出所有其他前缀（例如-ms-flex）。

示例输入：

div.class1 {
    display: grid;
}
div.class2 {
    display: flex;
}

输出：

div.class1 {
    display: grid;
}
div.class2 {
    display: -ms-flex;
    display: flex;
}

我们知道缺少的自动前缀选项是grid: true，但我们不知道如何正确传递该选项。我们有什么需要改变的？

（节点版本 8.9.4，npm 版本 5.6.0）

【问题讨论】：

你在not ie < 11的浏览器列表中排除了ie11？
not ie < 11 排除除 11 之外的所有版本

标签： windows npm sass postcss autoprefixer

【解决方案1】：

plugins: () => [autoprefixer({ browsers: ["> 1%", "last 2 versions", "not ie <= 8"], grid: true })],

我正在使用 webpack，我的配置如下所示：

我的 package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
],

我的 webpack.config.js

 const package = require('./package.json');

  {
     loader: 'postcss-loader',
     options: {
           ident: 'postcss',
           plugins: () => [autoprefixer({ browsers: package.browserslist, grid: true })],
      },
 },

希望对你有帮助。

【讨论】：