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
}

注意它的HALF是如何丢失的!？:/

我很困惑,任何帮助,我将永远感激不尽!

干杯!

Answer 1

Angular cli的autoprefixer使用browserslist(https://github.com/ai/browserslist)来确定css中需要的前缀.您可以将browserslist属性添加到browserslist的package.json文件中,以获取您想要支持的浏览器

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

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

### Supported Browsers

> 1%
last 2 versions

现在,autoprefixer将选择您想要支持的浏览器并相应地添加前缀.这在角度cli doc(https://github.com/angular/angular-cli/wiki/stories-autoprefixer)中都有效.

简而言之,gulp-postcss和angular cli支持不同的浏览器范围,从而产生不同的css前缀.