Gulp 4 编译 scss 创建空的 css 文件，但 sass 编译正确答案

【问题标题】：Gulp 4 compilling scss creates empty css file, but sass compiles correctlyGulp 4 编译 scss 创建空的 css 文件，但 sass 编译正确
【发布时间】：2019-05-26 22:24:55
【问题描述】：

我已经在 Windows 中安装了 gulp@4.0.0、gulp-sass@4.0.2 和最新的 gulp-cli

当我为 src() 设置路径以查找 'assets/css/src/**/*.sass' 文件以创建流时，它会将 sass 正确编译为 css。

但是当我尝试对'assets/css/src/**/*.scss' 文件执行此操作时，它会创建相应的 .css 文件，但为空。

当我故意将错误代码放入.scss 文件时，它会引发错误，因此 gulp-sass 实际上确实会通过 .scss 文件，但不会将缓冲区输出到 css 代码中。

即使我手动运行 node-sass 来编译脚本，它也会产生相同的问题，因此它可能更多地与 node-sass 作为编译器相关。

注意： .scss 和 .sass 的语法都是正确的，并且使用了正确的扩展名。

这是我的 gulpfile.js：

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


let paths = {
    css : {
        src  : 'assets/css/src/**/*.scss',
        dest : 'assets/css/dist'           
    }
};


function style() { 

    return (
        gulp
            .src(paths.css.src)
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(gulp.dest(paths.css.dest))
    );
}


// $ gulp style
exports.style = style;

【问题讨论】：

您可以尝试删除退货声明中的括号。
@TheDancingCode，谢谢，但这没有任何影响。正如我所提到的，当我设置流式传输 .sass 文件而不是 .scss 的路径时，它可以正确编译，但 .scss 返回空缓冲区
尝试将 'dist' 目录移到 'assets' 之外。将 'src' 和 'dest' 放在不同的位置。我通常在根目录上创建“source”和“public”（dist）目录。
@Shakespear，我之前尝试过，它产生了同样的问题

标签： css sass gulp gulp-sass node-sass

【解决方案1】：

已解决：原来只有具有某些属性的样式块被注释，从而导致 .scss 文件返回空输出，并且 sass 不会编译空块。

【讨论】：

【解决方案2】：

可能是当您将文件扩展名更改为.scss 时，内容仍在使用旧样式的缩进语法。

.SASS 缩进语法

body
    background-color: red;

    h1
        font-size: 2.5rem;

.SCSS 语法

body {
    background-color: red;

    h1 {
        font-size: 2.5rem;
    }
}

确保每个扩展都使用正确的语法。

您可以阅读更多关于Sass Indented Syntax 和SASS and SCSS 之间的区别

【讨论】：

谢谢，但我使用了正确的语法和正确的扩展名。当我进一步测试时，我尝试手动运行 node-sass 编译，看起来问题已缩小到 node-sass。换句话说，答案中的建议不是问题。无论如何感谢您的努力。