gulp-clean-css 使用@extend 时清理/删除重复的 css

Question

我在 scss 上遇到 @extend 的奇怪问题。当我扩展一些具有重复属性的 %placeholder 时，gulp-clean-css 将它们合并，我不希望这种情况发生。

举个例子： foo.scss

%one {
    font-size: 16px;
    width: 95%;
}

%two {
    font-size: 1rem;
    width: calc(100% - 10px);
}


.foo {
    @extend %one;
    @extend %two;
}


.foo2 {
    font-size: 16px;
    font-size: 1rem;
}

foo.min.css

.foo{font-size:1rem;width:calc(100% - 10px);}
.foo2{font-size:16px;font-size:1rem}

为什么会这样？

如果有帮助，这是我的gulp-任务：

gulp.task('scss', function(){
    console.log('start task scss');
    gulp.src(folderStyles)
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))
        .pipe(gulp.dest(folderStyles));
    logEnv();
});

还有其他更好用的插件吗？我不希望它删除重复的属性。如果你问我为什么，那是因为旧浏览器支持而不是可能不支持 rem 或 calc，或其他 "new fancy propertie" ;)

谢谢:)

Answer 1

我试过这个，我认为你的设置不适合 'noAdvanced':

而不是：

.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))

使用：

.pipe(cleanCSS({compatibility: 'ie9', advanced: false}))

根据文档：

advanced - set to false to disable advanced optimizations - selector & property merging, reduction, etc.

https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api

这不会给你留下 1 个带有两个字体大小声明的 .foo 选择器，它只是不会合并两者，所以你最终会得到：

.foo {
    font-size:16px;
    width:95%
}
.foo {
    font-size:1rem;
    width:calc(100% - 10px)
}
.foo2{
    font-size:16px;
    font-size:1rem
}

这解决了您的问题，但是有点违背了使用 clean-css 之类的目的。我很好奇你为什么要在 CSS 中保留两个字体大小声明，而第一个声明无论如何都会被覆盖。

gulp-clean-css 使用@extend 时清理/删除重复的 css

gulp-clean-css cleaning / removing duplicated css when using @extend

sass

gulp

extend

gulp-clean-css