gulp-sass 不编译 sass 文件答案

【问题标题】：gulp-sass not compiling sass filesgulp-sass 不编译 sass 文件
【发布时间】：2014-07-04 21:32:00
【问题描述】：

我实际上是在尝试构建一个 gulp，计划做一些与 Web 相关的事情，比如编译 sass、缩小 css、丑化 javascript 等等。但是我真的很难用 sass。

这是我的代码示例：

gulp.task('compile-sass', function() {
    gulp.src(buildType+config.path.sass+"/main.sass")
        .pipe(compass({
            css: 'css',
            sass: 'sass'
        }))
    .pipe(gulp.dest(buildType+config.path.css+"/test"));
});

所以我在这里使用指南针，因为我只有 *.sass 文件而没有 .scss，所以 gulp-sass 对我不起作用。因此，我问是否有人可以给我一个提示，为什么这个任务不起作用。这是我的控制台返回的内容：

[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.


events.js:72
    throw er; // Unhandled 'error' event
          ^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

我知道我没有使用任何 config.rb，但有两件事： 1）我没有找到此类文件的示例 2) gulp-compass doc 给出了没有这样一个文件的例子，所以我认为它是可选的

提前致谢。

【问题讨论】：

buildType+config.path.sass 和 buildType+config.path.css 的值是多少？它们是从您运行gulp 的项目根目录开始的相对路径吗？关于配置，它不是gulp-compass 配置，而是compass confg itself。还有一件事，Compass 只将库添加到 SASS。其中，编译.sass和.scss的能力不是来自Compass，而是来自SASS本身，所以gulp-sass无论如何都应该为你工作。
感谢您的快速回答。 buildType+config.path.sass 是来自 Json 配置文件的有效字符串，我在同一个 gulpfile 中的其他任务中使用它，它运行良好。当我使用gulp-sass 而不是“指南针”时，读取文件时会出现另一个错误（[gulp] [gulp-sass] source string:4: error: error reading values after $gray 和其他类似的）。我假设 gulp-sass 不支持 .sass 文件，而只支持 .scss。
gulp 不关心文件扩展名是什么。它使用了node-sass 解析器。考虑使用gulp-ruby-sass，因为它应该支持 .scss 和 .sass 扩展。然后它可以减少可能的错误以缩小您的问题范围。
谢谢@SteveLacy。一切都按预期工作！答案已发布。

标签： sass gulp

【解决方案1】：

较新版本的 node-sass（因此 gulp-sass，它只是 node-sass 的一个瘦包装器）处理 sass 和 scss 语法，并决定使用哪种语法通过读取文件扩展名强>。

这是一个处理 scss 和 sass 语法的 gulp 文件的演示（不是您希望在项目中使用的）：

var sass = require('gulp-sass');
sass.compiler = require('node-sass');

gulp.task('my-sass-task', function () {
  return gulp.src('styles/**/*.sass')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

gulp.task('my-scss-task', function () {
  return gulp.src('styles/**/*.scss')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

这似乎没有记录在任何容易找到的地方，我只是偶然发现了它。

旁注：我被 sass 求爱，但我想我会改用 scss。 This SO question 的答案中有很多有用的信息，如果您将鼠标悬停在选择哪个上。

【讨论】：

【解决方案2】：

我知道这可能不是此答案的正确位置，但对于出现 gulp-ruby-sass 错误的人来说，Google 上并没有太多内容。

对于收到错误“source 与任何文件不匹配”的任何人。请确保您放置在 gulp.src() 中的路径至少包含 1 个 sass（或 scss）文件。

在我的情况下，我有 3 条路径用于任务，只有 1 条路径是完全空的。通过将空白文件 (_fake.scss) 添加到该路径，错误已得到修复。

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

gulp-sass 使用的node-sass 最新版本支持sass 和scss 语法。

https://github.com/sass/node-sass/releases

node-sass 正在使用 libsasss

https://github.com/sass/libsass/releases

查看他们的 2.0 发行说明。

【讨论】：

【解决方案4】：

最基本最简单的方法是：

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

gulp.task('styles', function() {
    gulp.src('sass/*.scss')
    .pipe(sass({ 
        noCache : true,
        style   : "compact"
    }))
    .pipe(gulp.dest('css'));
});

【讨论】：

你不是说sass/*.sass吗？

【解决方案5】：

感谢 SteveLacy，我可以设法解决这个问题。

如果你只有 .sass 文件，没有 .scss，你需要使用 gulp-ruby-sass 而不是 gulp-compass 或 gulp-sass。这是我的工作代码示例：

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

gulp.task('compile-sass', function() {
    gulp.src(path/to/your/sass/folder/main.sass")
        .pipe(sass())
    .pipe(gulp.dest('path/to/your/css/folder));
});

【讨论】：