it-swarm.com.ru

Объедините все файлы Sass в один файл

Есть ли в gulp-sass опция для объединения файлов sass? 

Например:

main.scss:

$var: red;

control.scss:

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

Объединенный выходной файл должен быть одним файлом scss, как показано ниже

$var: red;
.a{
  color: $var;
}
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/'));
});

Это должно привести к единому scss в ./dist/all.scss.

Я не знаю, правильно ли обрабатываются операторы @import, но эти проблемы Обычно обрабатываются модулями ad-hoc (например, gulp-sass ), которые выдают вывод .css .. ,.

10
MarcoS

Вот решение, полное доказательство решения. Вам также нужно использовать gulp-scss-comb.

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

Вы можете играть с кодом здесь. код , в основном делает то же самое, но не в gulp, а в стандартном приложении node.js. просто удалите файл all.scss или его содержимое, затем запустите программу. вы увидите результат.

1
sorabh86