マージ複数のファイルがグッとクラスで一つのファイルにCSS

Question

組み合わせCSSファイル

こんにちはにすべて

、私はスタイルを処理するためにSASSを使用して反応し、プロジェクトで働いている、私はいくつかのSCSSファイルとIグループを持っています彼らは gulpを使用して、私は gulp-sassを使用して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ルールを組み合わせること変更することができますので、が、私は、とにかくを組み合わせることはお勧めしませんルールの優先順位。

---

例では、二つの要素、および2つのクラスを持っているシナリオを想像してみてください。

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

と連結されたCSSは、次のようになります：HTMLコードがある

.foo { 
    background: #000; 
} 

.bar { 
    color: #999; 
} 

.foo { 
    color: #FFF; 
} 

結果が定義するので、#000の背景色と#FFFのテキストの色を持つ両方のdivのだろう.fooのテキストの色は、.barの後になります。

ルールを組み合わせた場合、CSSはこのようになります。両方div sがまだ#000の背景色を持っていますが、2番目のdivは今テキストの色を持つことになりますよう

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

.bar { 
    color: #999; 
} 

これは、意味を変更します#999の場合、.barが現在.fooよりも優先されます。