What could be causing the disruption of Bootstrap styles by ccsnano in the Gulp builder configuration?

Question

What could be causing the disruption of Bootstrap styles by ccsnano in the Gulp builder configuration?

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

Root styles in the bootstrap framework contain these lines: --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545 }

When using cssnano(), the modification is made from --bs-form-invalid-border-color:** #dc3545 to border:1px solid #dc3545; How can this alteration be prevented?

https://i.sstatic.net/9TxcVvKN.png Red HTML border =)

css bootstrap-4 gulp

Answer 1

Answer №1

It appears that the issue you are facing could be related to cssnano's default settings, which sometimes modify CSS custom properties (variables). To address this, you can customize the configuration to disable the specific optimization causing the problem.

To resolve this issue, you can provide a configuration object to cssnano and deactivate the reduceInitial optimization. This adjustment may help fix the problem you are experiencing.

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

Answer 2

It appears that the issue you are facing could be related to cssnano's default settings, which sometimes modify CSS custom properties (variables). To address this, you can customize the configuration to disable the specific optimization causing the problem.

To resolve this issue, you can provide a configuration object to cssnano and deactivate the reduceInitial optimization. This adjustment may help fix the problem you are experiencing.

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

What could be causing the disruption of Bootstrap styles by ccsnano in the Gulp builder configuration?

Answer №1

Similar questions

Only the first item in a list generated using a loop will properly display collapse

How to position footer at the bottom of Material UI cards - see example below

Styling text using CSS depending on the displayed text

What is the significance of vendor prefixes in the world of CSS3?

Even after implementing the focus() function, the list item still fails to receive focus

The fixed position setting does not anchor the elements to the bottom of a container

The Dilemma of Hover Effects in Internet Explorer 7

Slide the toggle icon to activate the add-to-cart button on click!

Having trouble displaying images in my 360-degree rotation slider

Troubleshooting problem regarding the use of visibility: hidden; and transition property in HTML

Avoid scrolling when the element changes size

Adjusting an HTML table to fit within a designated space

Conceal a list of items within a div that has a particular class

Using CSS3 to conceal overflow when applying a transform effect

Differentiate pointer for checkbox HTML

Circular CSS menu

Attempting to implement a date picker in an ASP.NET C# page using Bootstrap

Changing the Color of a Table Cell with jQuery

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

The capacity to rotate div containers, adjust their dimensions, and engage with the content within