如何在Angular 7中配置Autoprefixer

Question

我在Angular 7 Project中使用autoprefix。但是当我打开浏览器devtools并使用“简单内容”类来聚焦元素时，它具有显示flex作为应用样式，没有预期的“前缀”。在Angular 4-6项目中，这可行。

步骤1：运行服务步骤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工具（qazxsw poi）来测试你在package.json中使用的browserslist，并观察到它没有生成前缀css：

在将浏览器列表值更改为最后2个版本时，它生成了autoprefixer css：

所以你的package.json似乎很好，你可以通过更新浏览器列表来尝试它。

还有FYI，angular cli V7.3.5添加了src / browserslist，这意味着你不需要将.browserslistrc或browserslist属性添加到package.json for angular 7项目。您需要做的就是不在最后一行删除以支持IE 9-11。