如何在 Grunt 中定义 clean-css 属性以防止 0% 被转换为 0

Question

我正在使用 Grunt 中的 cssmin 插件缩小我的 css 文件。我注意到背景属性得到了优化。 Gruntfile.js

cssmin: {
    options: {
      // ...
    },
    target: {
        files: [{
            expand: true,
            cwd: './htdocs/css/src',
            src: '**/*.css',
            dest: './htdocs/css/dist',
            ext: '.min.css'
        }]
    }
}

.carousel {
    background: linear-gradient(70deg, #c12365 0%, #c72570 1%, #c12365 calc(0% + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);
    overflow: visible;
}

实现后台我写的代码但是在运行 grunt task runner 之后生成的最小文件已经优化为

.carousel{background:linear-gradient(70deg, #c12365 0, #c72570 1%, #c12365 calc(0 + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);overflow:visible}

注： cssmin将0%值转换为0，使背景不同

我什至阅读了文档并尝试将所有级别 1 和级别 2 属性设置为 false 作为选项参数

options: {
    level: {
        1: {
            all: false // set all values to `false`
        },
        2: {
            all: false // set all values to `false`
        }
    }
}

仍然没有得到想要的结果。

谁能帮帮我

Answer 1

在您的 cssmin 任务中将 zeroUnits 选项设置为 false。

例如：

cssmin: {
  options: {
    compatibility: {
      properties: {
        zeroUnits: false   // <------
      }
    }
  },
  target: {
    files: [{
      expand: true,
      cwd: './htdocs/css/src',
      src: '**/*.css',
      dest: './htdocs/css/dist',
      ext: '.min.css'
    }]
  }
}

结果：

.carousel{background:linear-gradient(70deg,#c12365 0%,#c72570 1%,#c12365 calc(0% + 1px),#c12365 40%,#404040 calc(20% + 1px),#404040 75%,#404040 calc(75% + 1px),#404040 100%);overflow:visible}

注意：0% 值已被保留。

如何在 Grunt 中定义 clean-css 属性以防止 0% 被转换为 0

How to define clean-css properties in Grunt to prevent 0% from being converted to 0

css

minify

gruntjs

grunt-contrib-cssmin

clean-css