Question

我已经在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;

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以及SASS and SCSS之间的区别

Answer 2

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

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

2 个答案: