如何在 Angular 7 中配置 Autoprefixer

Question

我在 Angular 7 项目中使用自动前缀。 但是，当我打开浏览器 devtools 并使用类“simple-content”（将显示 flex 作为应用样式）聚焦元素时，没有预期的“前缀”。 在 Angular 4-6 项目中，这可以正常工作。

第 1 步：运行 ng serve 第 2 步：打开浏览器 devtools 并聚焦具有类“simple-content”的元素，该元素具有 display:flex。

在 package.json 我有

 {
    "browserslist": [
    "last 1 version",
    "> 1%"
    ]
  }. 

In package-lock.json I have 

    "autoprefixer": {
      "version": "9.4.4",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.4.tgz",
      "integrity": "sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==",
      "requires": {
        "browserslist": "^4.3.7",
        "caniuse-lite": "^1.0.30000926",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.7",
        "postcss-value-parser": "^3.3.1"
      },

我尝试使用 /* autoprefixer: on */ 为 flexbox 启用自动前缀，但没有结果。

在我的css文件中

.simple-content {
    display: flex;
}

预期结果：

.simple-content {
  display: -webkit-box;    
  display: -moz-box;      
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;             
}

Answer 1

我尝试了在线 autoprefixer 工具 (https://autoprefixer.github.io/) 来测试您在 package.json 中使用的浏览器列表，并观察到它没有生成带前缀的 css：

在将浏览器列表值更改为 last 2 version 时，它会生成带有自动前缀的 css：

所以你的 package.json 看起来不错，你可以通过更新浏览器列表来尝试。

另外仅供参考，angular cli V7.3.5 添加了 src/browserslist 这意味着您无需将 .browserslistrc 或 browserslist 属性添加到 package.json 用于 Angular 7 项目。您需要做的就是删除最后一行的 not 以支持 IE 9-11。