如何在 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 时，它生成了 autoprefixed css：

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

另外仅供参考，angular cli V7.3.5 添加了src/browserslist这意味着您不需要将.browserslistrc或browserslist 属性添加到angular 7 项目的 package.json中。您需要做的就是删除not on last line 以支持IE 9-11。