为什么 ccsnano 会弄乱 gulp builder 中 bootstrap 样式的 css？

Question

.pipe(sassGlob())
.pipe(sass(["last 2 version", "> 2%"]))
.pipe(autoprefixer())
.pipe(cssbeautify())
.pipe(gulp.dest("./dist/assets/css/"))
.pipe(cssnano())
.pipe(
    rename({
        suffix: ".min",
        extname: ".css",
    })
)
.pipe(gulp.dest("./dist/assets/css/"))

在引导样式中，根目录中有几行 --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545 }

cssnano() 更改 --bs-form-invalid-border-color:** #dc3545 -> border:1pxsolid #dc3545; 如何避免这种情况？

红色 HTML 边框 =)

Answer 1

您遇到的问题可能是由于 cssnano 的默认配置造成的，其中包括有时会更改 CSS 自定义属性（变量）的优化。为了防止这种情况，您可以将其配置为禁用导致问题的特定优化。

您可以将配置对象传递给cssnano来禁用reduceInitial优化。这应该可以解决您的问题。

    .pipe(sassGlob())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions', '> 2%'],
      cascade: false
    }))
    .pipe(cssbeautify())
    .pipe(gulp.dest('./dist/assets/css/'))
    .pipe(cssnano({
      reduceInitial: false // <<ADD THIS LINE
    }))
    .pipe(rename({
      suffix: '.min',
      extname: '.css'
    }))
    .pipe(gulp.dest('./dist/assets/css/'));