gulp autoprefixer 的缩进问题？

Question

我知道这是低优先级，但我注意到 gulp autoprefixer 破坏了我的 css 代码缩进，变成了这样的样式：

-webkit-box-align: center;
  -webkit-align-items: center;
    -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
    -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em;

我不知道我是否应该手动修复这个问题，或者只是这种风格可以接受，我可以不管它吗？？？

Answer 1

我建议使用 gulp-postcss with npm package autoprefixer. (example)

有了 postcss，你就灵活多了。有很多 postcss-plugins 有助于获得最佳 CSS。

要获得具有正确缩进的正确格式，您可以运行在自动前缀器之后的 postcss-prettify 插件。

如果您以后需要缩小 CSS 用于生产，您可以使用 cssnano。

Answer 2

我还会查看 autoprefixer 的级联选项。看起来它可能是您错误缩进的根源。尝试：

autoprefixer({ cascade: false })

默认值为 true，可能会为您提供您所看到的结果。

autoprefixer options

gulp autoprefixer 的缩进问题？

indentation problem with gulp autoprefixer?

javascript

css

indentation

gulp

autoprefixer