Angular CLI 删除带前缀的 CSS

Question

我正在使用 @angular/cli@1.4.3。

在构建之前，我使用 gulp-postcss 自动为我的 CSS 添加前缀。这是一种享受。这是它创建的 CSS 示例(为了便于阅读，未缩小):

form.registration-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

完美!但是当 CLI 构建应用程序时，创建的 CSS 如下所示:

form.registration-form {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}

注意一半不见了!？ :/

我很困惑，任何帮助，我将永远感激不已!

干杯!

Answer 1

Angular cli 的 autoprefixer 正在使用 browserslist ( https://github.com/ai/browserslist ) 来确定您的 css 中需要哪些前缀。您可以将 browserslist 属性添加到 package.json 文件中，以便 browserslist 选择您想要支持的浏览器

"browserslist": [
   "> 1%",
   "last 2 versions"
]

或者您将 .browserslistrc 文件添加到目录的根目录

### Supported Browsers

> 1%
last 2 versions

现在 autoprefixer 将选择您想要支持的浏览器并相应地添加前缀。这一切都在 Angular cli 文档 ( https://github.com/angular/angular-cli/wiki/stories-autoprefixer ) 中进行了概述

简而言之，gulp-postcss 和 angular cli 支持不同范围的浏览器，这导致不同的 css 前缀。