在将sass编译为一个css文件时吞咽复制css

在将sass编译为一个css文件时吞咽复制css,css,sass,gulp,gulp-sass,gulp-concat,Css,Sass,Gulp,Gulp Sass,Gulp Concat,我不熟悉使用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')

我不熟悉使用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']);
});
@charset "UTF-8";

@import "partials/variables";
@import "partials/typography";
@import "partials/utilities";
@import "partials/nav";
@import "partials/gallery";
@import "partials/footer";
@import "partials/brand";
我编译的scss文件如下所示:

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']);
});
@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文件创建的main.css文件中显示两次,但在scss文件中仅显示一次


有人能帮我理解我做错了什么吗?我看了一些与我类似的其他问题,但它们似乎没有解决问题。

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

我认为你不需要concat,sass对你很重要谢谢你的帮助!我试过修改后的代码,效果很好-我在“sass”任务中做了一个小改动:删除了不必要的空[],这有帮助吗?我看到你修改了你的评论,它对你有用。伟大的