在将 sass 编译成一个 css 文件时吞噬复制 css

Question

我是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";

每个文件中的所有内容在我的主文件（由我的gulp文件创建）中出现两次.css但在scss文件中只出现一次。

谁能帮我了解我做错了什么？我看了一下其他一些与我类似的问题，但它们似乎没有解决问题。

Answer 1

正如@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();
});