用gulp-sass编译scss后缀名的文件，出来的还是scss文件？

Question

按理说，编译scss应该是生成css才对啊。、

gulpfile.js如下：

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

//sass  
gulp.task('sass', function() {  
    return gulp.src('./scss/*.scss')  
    .pipe(sass({  
        outputStyle: 'compressed'  
    }).pipe(gulp.dest('./css')));  
});

scss文件如下：

$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译出来的是scss文件，内容跟上面的scss一样，求解？

Answer 1

供参考：

const gulp = require("gulp"),
    sass = require("gulp-sass");

const folder = {
    src: "src/scss/", // source files
    dist: "dist/css/", // build files
};
const buildCss = () => {
    return gulp
        .src([folder.src + "/master.scss"])
        .pipe(
            sass({
                outputStyle: "compressed",
            })
        ) // scss to css
        .pipe(gulp.dest(folder.dist));
};
const watchFiles = () => {
    gulp.watch(folder.src + "**/*", gulp.series(buildCss));
};
gulp.task("watch", watchFiles);
gulp.task("default", gulp.series(buildCss, "watch"), function (done) {
    done();
});

这里有完整的SCSS项目代码：https://github.com/QuintionTang/scss-guide.git