我正在使用@ 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是如何丢失的!? :/
我感到困惑,任何帮助,我将永远感激不尽!
干杯!
答案 0 :(得分:6)
Angular cli的autoprefixer正在使用browserslist(https://github.com/ai/browserslist)来确定你的css需要什么前缀。您可以将browserslist属性添加到您的packages.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前缀。