Объединить несколько файлов CSS в один файл по классам с Gulp

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

Есть ли способ сделать то, что я хочу?

Моя глоточная задача:

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

Это меняет значение, так как оба divs по-прежнему будет иметь цвет фона #000, но второй div теперь будет иметь цвет текста #999, как .bar теперь имеет приоритет над .foo,