主页 / coding / 问题 / 79210109
Accepted
user28155802
Asked: 2024-11-21 15:33:26 +0800 CST

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

  • 772

.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:1px solid #dc3545; 如何避免这种情况？

在此处输入图片描述 红色 HTML 边框 =)

css

1 个回答

  1. Best Answer

    您遇到的问题可能是由于 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/'));

    • 1

相关问题