如何让 gulp-clean-css 在 !important 之前保留空格？答案

【问题标题】：How to make gulp-clean-css preserve whitespace before !important?如何让 gulp-clean-css 在 !important 之前保留空格？
【发布时间】：2019-08-27 22:47:29
【问题描述】：

在优化代码时，gulp-clean-css 会从 css 值和结束词 !important 之间删除重要的空格，例如。 width: 600px !important 变为 width: 600px!important

对了，1级semicolonAfterLastProperty: true设置也不起作用！

我已阅读此处的文档 - https://github.com/jakubpawlowicz/clean-css#formatting-options - 并尝试使用 level1 transform: function () {} 但它不起作用。

.pipe(cleanCSS({
        format : 'beautify',
        level: {

   1: {
      transform: function (propertyName, propertyValue, selector ) {
        if (propertyValue.indexOf('!important') > -1) {
          return propertyValue.replace('!important', ' !important');
        }
      },
        semicolonAfterLastProperty: true
    },
    2 : {
        removeDuplicateRules : true
     }
     }      
    }))

到目前为止，唯一可行的解决方案是将代码的关键部分用 /* clean-css ignore:start */ .... /* clean-css ignore: end */，但我正在寻找更好的方法。

【问题讨论】：

标签： gulp clean-css

【解决方案1】：

嗯，看来 gulp-replace 插件有帮助：

来自 gulpfile.js：

const replace = require('gulp-replace');

...切... 和： .pipe(replace('!important', '!important'))

【讨论】：