Question

我在Angular 7 Project中使用自动前缀。但是，当我打开浏览器devtools并使用“ simple-content”类集中该元素时，该类已将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：为flexbox启用自动前缀功能，但是没有结果。

我拥有的css文件中

.simple-content {
    display: flex;
}

预期结果：

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

Answer 1

我尝试了在线自动前缀工具（https://autoprefixer.github.io/）来测试您在package.json中使用的浏览器列表，并观察到它没有生成带前缀的CSS（附有屏幕截图）。 did not yield prefixed css

将浏览器列表值更改为最近2个版本时，它会生成自动添加前缀的CSS。 did generate prefixed css

因此，您的package.json看起来不错，您可以通过更新浏览器列表来尝试使用它。

FYI，Angular cli V7.3.5添加了 src / browserslist ，这意味着您无需在package.json中添加 .browserslistrc 或 browserslist属性。 / strong>，用于角度7项目。您需要做的就是在最后一行删除 not ，以支持 IE 9-11 。

如何在Angular 7中配置Autoprefixer

1 个答案: