通过gulp类将多个文件css合并为一个文件

Question

合并CSS文件

大家好，我正在使用一个项目进行反应，我使用sass来处理样式，我有几个scss文件，我使用gulp对它们进行分组，我使用gulp-sass来生成css和gulp-merge-css加入它们，但它们连接起来，而不是它结合起来。

这是一个例子

在文件中

.fooClass {
  background-color: black;
}

在另一个档案

.fooClass {
  color: white;
}

这些文件应该转到

.fooClass {
  background-color: black;
  color: white;
}

但它没有发生，只有内容被合并但没有合并，结果是

.fooClass {
  background-color: black;
 }
.fooClass {
  color: white;
 }

有什么办法可以做我想要的吗？

我的 gulp-task 是：

const gulp = require('gulp');
const browserSync = require('browser-sync');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const mergeCSS = require('gulp-merge-css')
const cleanCSS = require('gulp-clean-css');

const conf = require('../conf/gulp.conf');

gulp.task('styles', styles);

function styles() {
  return gulp.src(conf.path.src('**/*.scss'))
    .pipe(sass.sync({outputStyle: 'compressed'})).on('error', conf.errorHandler('Sass'))
    .pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
    .pipe(mergeCSS({ name: 'style.css' }))
    .pipe(cleanCSS({compatibility: 'ie8', multiplePseudoMerging: true}))
    .pipe(gulp.dest(conf.path.tmp()))
    .pipe(browserSync.stream());
}

Answer 1

我认为没有一个插件可以实现这一点，但我不建议组合，因为组合CSS规则可以改变规则的优先级。

示例

想象一下你有两个元素和两个类的场景。 HTML代码是：

<div class="foo">Hello</div>
<div class="foo bar">World</div>

并且连接的CSS看起来像这样：

.foo {
  background: #000;
}

.bar {
  color: #999;
}

.foo {
  color: #FFF;
}

结果是div的背景色为#000，文字颜色为#FFF，因为.foo的文字颜色的定义是在.bar。

如果你合并规则，CSS就变成了这个：

.foo {
  background: #000;
  color: #FFF;
}

.bar {
  color: #999;
}

这会更改含义，因为div的两个背景颜色仍为#000，但第二个div现在的文字颜色为#999，因为.bar现在优先于.foo。