0

合并 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;
 }

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

我的吞咽任务是：

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());
}
4

1 回答 1

0

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

例子

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

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

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

.foo {
  background: #000;
}

.bar {
  color: #999;
}

.foo {
  color: #FFF;
}

结果将是divs 的背景颜色为#000，文本颜色为#FFF，因为文本颜色的定义在.foo之后.bar。

如果结合规则，CSS 变为：

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

.bar {
  color: #999;
}

这改变了含义，因为两个divs 的背景颜色仍然为#000，但第二个div现在将具有文本颜色#999，因为.bar现在优先于.foo。

于 2017-06-30T10:18:36.353 回答