Question

我的_layout.scss文件中有以下SCSS

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

此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

停止使用一些自动css

1 个答案: