web-dev-qa-db-ja.com

すべてのsassファイルを1つのファイルに結合する

Gulp-sassでsassファイルを組み合わせるためのオプションはありますか？

例えば：

main.scss：

$var: red;

control.scss：

@import 'main';
.a{
  color: $var;
}

結合された出力ファイルは、以下のような単一のscssファイルである必要があります

$var: red;
.a{
  color: $var;
}
sassgulpgulp-sassnode-sass
13
Yahwe Raj

このようなことを試しましたか？

gulp = require('gulp');
concat = require('gulp-concat');

// the default task
gulp.task('default', function() {
    return gulp.src('./*.scss')
       .pipe(concat('all.scss'))
       .pipe(gulp.dest('./dist/'));
});

これにより、./dist/all.scssに単一の結合されたscssが生成されます。

@importステートメントが正しく処理されているかどうかはわかりませんが、これらの問題は通常ad-hocモジュールによって処理されます（たとえば、- gulp-sass ）、.css出力を生成します...

13
MarcoS

ここにソリューション、完全な証明ソリューションがあります。 gulp-scss-combineも使用する必要があります。

(function(r){
    const gulp = r('gulp'); 
    const combine = r('gulp-scss-combine');
    const concat = r('gulp-concat');

    gulp.task('combine-scss', ()=>gulp.src('scss/**')  // define a source files
        .pipe(combine())   // combine them based on @import and save it to stream
        .pipe(concat('style.scss')) // concat the stream output in single file
        .pipe(gulp.dest('css'))  // save file to destination.
    );
})(require);

ここでコードを試すことができます。 code 、基本的に同じことを行いますが、gulpではなく、node.js標準アプリケーションです。 all.scssファイルまたはそのコンテンツを削除してから、プログラムを実行してください。結果が表示されます。

3
sorabh86