Gulp дублирование css при компиляции sass в один файл css

Я новичок в Stack Overflow и Gulp (использую 3.9.1). Я пытаюсь скомпилировать все мои файлы scss в один большой файл css, который я могу включить на свой веб-сайт. Пока мой gulpfile выглядит так:

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

sass.compiler = require('node-sass');

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

gulp.task('sass', [], function() {
    gulp.src("resources/scss/**/*.scss")
        .pipe(concat('main.scss'))
        .pipe(sass())
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('resources/css'));
});

gulp.task('watch', function () {
    gulp.watch('resources/scss/**/*.scss', ['sass']);
});

и мой скомпилированный файл scss выглядит так:

@charset "UTF-8";

@import "partials/variables";
@import "partials/typography";
@import "partials/utilities";
@import "partials/nav";
@import "partials/gallery";
@import "partials/footer";
@import "partials/brand";

Все в каждом из этих файлов дважды появляется в моем файле main.css (созданном моим файлом gulp), но появляется только один раз в файлах scss.

Может ли кто-нибудь помочь мне понять, что я сделал не так, пожалуйста? Я посмотрел на некоторые другие вопросы, похожие на мой, но, похоже, они не помогли решить проблему.


css sass gulp gulp-sass gulp-concat
person user1945036    schedule 14.01.2019    source источник
comment
Я не думаю, что вам нужен concat, sass импортирует для вас   -  person Derek Nguyen    schedule 14.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Как говорит @DerekNguyen, и другие исправления ниже:

var gulp = require('gulp');
var sass = require('gulp-sass');

//  next two lines are not needed
//  var concat = require('gulp-concat');    
//  sass.compiler = require('node-sass');

// duplicates not needed
//  var gulp = require('gulp');
//  var concat = require('gulp-concat');

gulp.task('sass', function() {

    // add return statement below
    // your gulp.src would typically be the one file into which
    // the partials are imported, presumably main.scss in your case
    // The resulting css file will automatically be named main.css if you start with main.scss

    return gulp.src("resources/scss/main.scss")
        //  .pipe(concat('main.scss'))
        .pipe(sass())
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('resources/css'));
});

// added done below to signal async completion
gulp.task('watch', function (done) {
    gulp.watch('resources/scss/**/*.scss', ['sass']);
    done();
});
person Mark    schedule 14.01.2019
comment
Спасибо за помощь! Я попробовал исправленный код, и он отлично работает! :-) - person user1945036; 14.01.2019
comment
Я сделал небольшое изменение в задаче sass: удалил пустой [], который не нужен - это поможет? Я вижу, вы изменили свой комментарий, и он работает для вас. Большой. - person Mark; 14.01.2019