停止使用一些汽车CSS

Question

我在_layout.scss文件

.wrap { 
    display: flex; 
    flex-wrap: wrap; 
} 

以下SCSS和这SCSS被自动替换为下面的CSS，但我想停止使用(display: -webkit-box;)

.wrap { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

我的意思是说，CSS应该如下所示

.wrap { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

Answer 1

更新您的autoprefixer。我假设你使用Gulp或Grunt？

您也可以使用此解决方法：

var postcss = require('postcss'); 

module.exports = postcss.plugin('flexbox-cleaner', function() { 
    return function (css) { 
     css.walkAtRules('supports', function (rule) { 
      rule.params = rule.params.replace('((display: -webkit-flex) or (display: -ms-flexbox) or (display: flex))', '(display: flex)'); 
     }); 
    }; 
} 

这是一个postCSS插件，它让autoproefixer忽略某些Flexbox的参数（如你）。

source