angular - 如何在 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

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


将浏览器列表值更改为 最后 2 个版本 ，它生成了自动前缀的 css:


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

另外仅供引用，添加了 angular cli V7.3.5 源代码/浏览器列表 这意味着您不需要添加 .browserslistrc 或 browserslist 属性添加到 package.json 对于 angular 7 项目。您需要做的就是删除 不是 最后一行支持 IE 9-11 .