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

Question

合并 CSS 个文件

大家好，我正在做一个 React 项目，我使用 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-任务是：

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。