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

admin管理员组

文章数量:1332377

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

.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?

Red HTML border =)

• css
• bootstrap-4
• gulp

Share Improve this question Follow asked Nov 21, 2024 at 7:33 user28155802user28155802 2344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

本文标签： Why is ccsnano messing up the css of bootstrap styles in gulp builderStack Overflow