我是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文件中只出现一次。
有人可以帮助我了解我做错了什么吗?我看过其他一些与我的问题类似的问题,但是它们似乎并没有解决问题。
答案 0 :(得分: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();
});