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

Question

我已经安装了gulp@4.0.0、gulp-sass@4.0.2，以及Windows中最新的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;

Answer 1

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

.SASS 缩进语法

body
    background-color: red;

    h1
        font-size: 2.5rem;

.SCSS语法

body {
    background-color: red;

    h1 {
        font-size: 2.5rem;
    }
}

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

您可以阅读更多关于 Sass Indented Syntax and the difference between SASS and SCSS

Answer 2

已解决：原来只有有属性的style block被注释了，导致.scss文件return输出空，sass不会编译空块.

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

Gulp 4 compilling scss creates empty css file, but sass compiles correctly

css

sass

gulp

node-sass

gulp-sass