gulp-sass 的输出是 .scss 文件而不是 css 文件答案

【问题标题】：Output of gulp-sass is .scss files not css filesgulp-sass 的输出是 .scss 文件而不是 css 文件
【发布时间】：2017-11-15 11:38:25
【问题描述】：

我正在尝试使用 gulp 将一些 .scss 文件编译成 css。 gulpfile.js：

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

gulp.task("sass",
function() {
    return gulp.src("app/assets/sass/*.scss")
     .pipe(sass({
                includePaths: [
                    "govuk_modules/govuk_frontend_toolkit/stylesheets/",
                    "govuk_modules/govuk_template/assets/stylesheet/",
                    "govuk_modules/govuk-elements-sass/"
         ]
        }).pipe(gulp.dest("./wwwroot/stylesheets/")));
});

我正在使用 Visual Studio 2017，当我在任务资源管理器中运行 sass 任务时，我将预期的文件输出到目标文件夹中，但是，它们是 .scss 文件，而不是预期的 .css 文件。

路径中总共有 20 多个文件，这些文件确实被编译成 4 个文件，但就像我说的那样，是 .scss 而不是 css。

有什么想法吗？

【问题讨论】：

是文件scss的内容（内容未编译）还是只是文件的扩展名？
@animalitomaquina 是的，我应该说，内容也是刚刚合并在一起的scss文件的内容

标签： css gulp gulp-sass

【解决方案1】：

好的，所以我找到了问题所在。其中一个 SCSS 文件引用了另一个文件的路径，而我的路径拼错了！

已更正并正在工作

【讨论】：

【解决方案2】：

关闭你的第一个管道有问题，你应该在启动 gulp.dest 管道之前关闭它。

通过这样做，文件应该被编译成css而不是scss。

.pipe(sass({
    includePaths: [
        "govuk_modules/govuk_frontend_toolkit/stylesheets/",
        "govuk_modules/govuk_template/assets/stylesheet/",
        "govuk_modules/govuk-elements-sass/"
    ]
})).pipe(gulp.dest("./wwwroot/stylesheets/"));

【讨论】：