cssbootstrap-4gulp

Why is ccsnano messing up the css of bootstrap styles in gulp builder?

.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/"))

In the bootstrap styles, there are lines in root --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545 }

cssnano() change --bs-form-invalid-border-color:** #dc3545 -> border:1px solid #dc3545; How can this be avoided?

enter image description here Red HTML border =)

Solution

  • The issue you're encountering might be there due to cssnano's default configuration that includes optimizations that can sometimes alter CSS custom properties (variables). To prevent this, you can configure it to disable the specific optimization that is causing the issue.

    You can pass a configuration object to cssnano to disable the reduceInitial optimization. This should resolve your issue potentially.

        .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/'));