停止使用一些汽車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