fusionner plusieurs fichiers Css dans un seul fichier par des cours avec gulp

Question

Combiner des fichiers CSS

Salut à tous, je travaille avec un projet réagir et je l'utilise SASS pour traiter les styles, j'ai plusieurs fichiers SCSS et le groupe I en utilisant gulp, j'utilise gulp-sass pour générer le css et gulp-merge-css pour les joindre, mais ils concaténent, pas il combine.

Voici un exemple

Dans un fichier

.fooClass { 
    background-color: black; 
} 

Dans un autre fichier

.fooClass { 
    color: white; 
} 

Ces fichiers doivent aller à

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

Mais il ne se produit pas, ne se combine le contenu, mais combinés, le résultat est

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

Est-il possible de faire ce que je veux?

Mon gulp-tâche est:

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

Je ne pense pas qu'il existe un plugin pour y parvenir, mais je ne recommanderais pas la combinaison de toute façon, car la combinaison des règles CSS peuvent changer la préséance des règles.

---

Exemple

Imaginez un scénario où vous avez deux éléments, et deux classes. Le code HTML est:

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

et le CSS concaténés ressemble à ceci:

.foo { 
    background: #000; 
} 

.bar { 
    color: #999; 
} 

.foo { 
    color: #FFF; 
} 

Le résultat serait à la fois div s ayant une couleur de fond de #000 et une couleur de texte de #FFF, parce que la définition de la couleur du texte pour .foo vient après .bar.

Si vous combinez les règles, le CSS devient ceci:

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

.bar { 
    color: #999; 
} 

Cela change le sens, car les deux div s auront toujours une couleur de fond de #000, mais le second div disposera désormais d'une couleur de texte de #999, en tant que .bar a désormais priorité sur .foo.