如何设置 grunt postCSS 选项？

Question

在我的 gruntfile 中设置 postCSS，主要是作为处理自动前缀和缩小的便捷方式，使用以下代码。

postcss: {
  options: {
    map: false, // inline sourcemaps

    processors: [
      require('autoprefixer-core')({
      browsers: ['last 10 versions', 'ie 9'],
      remove: false,
      map: true,
    }), // add vendor prefixes
    require('cssnano')() // minify the result
  ]
},
style: {
  src: '<%= dirs.sassBuild %>/style.css',
  dest: '<%= dirs.publicCss %>/style.min.css'
},
admin: {
  src: '<%= dirs.sassBuild %>/admin.css',
  dest: '<%= dirs.publicCss %>/admin.min.css'
}

},

令我震惊的是，我发现它破坏了我的 RGBA 值，使它们成为 HSLA，将我精心制作的 REM 单位转换为 pc，调整了我的 z-index，天知道还有什么。

我明白这些都是"features"的postCSS，none我想要的

查看了一些文档后，我发现 a) 我可以禁用此行为，或者 b) 如何使用 grunt 来做到这一点。

是否可以具体收回对这些功能的控制权？

Answer 1

可以在以下位置找到 CSSnano 的优化：http://cssnano.co/optimisations/。

您可以通过将 option 设置为 false 来禁用某些优化。因此，例如禁用 postcss-calc:

require('cssnano')({calc: false}) // minify the result

您还写道，据我所知，您的 rem 值已转换为 px 值，autoprefixer 和 cssnano 都不会执行此转换。

Answer 2

I discovered that its mangling my RGBA values, making them HSLA

解决这个问题

cssnano({ colormin: false })

如何设置 grunt postCSS 选项？

how can you set grunt postCSS options?

gruntjs

postcss