Gulp构建中cssnano破坏Bootstrap CSS变量的问题及解决方法

在你的Gulp构建流程中，cssnano错误将Bootstrap定义在:root中的--bs-form-invalid-border-color变量转换为border:1px solid #dc3545;，导致出现意外的红色边框，可通过以下方式解决：

方案1：禁用cssnano中误处理变量的插件 #

修改cssnano()的调用参数，禁用可能识别错CSS变量的插件（比如reduceIdents，该插件会尝试简化标识符，容易误处理自定义属性）：

.pipe(cssnano({
  preset: ['default', {
    reduceIdents: false,
    discardUnused: false, // 避免误删未直接引用的根变量
    mergeRules: false // 防止规则合并时破坏变量定义
  }]
}))

方案2：精准保留CSS自定义属性 #

通过配置cssnano的customProperties插件，强制保留所有根元素定义的CSS变量，避免被错误替换：

.pipe(cssnano({
  preset: ['default', {
    customProperties: {
      preserve: true, // 保留所有自定义属性
      preserveInjectedVariables: true
    }
  }]
}))

问题原因说明 #

cssnano默认的压缩规则中，部分插件会尝试对CSS标识符做简化优化，当自定义变量名与常规CSS属性名（如border-color）高度相似时，容易被误识别为可直接替换的样式规则，进而出现变量被转换为具体border样式的错误。

内容的提问来源于stack exchange，提问作者user28155802