gulp-sass 错误：管道中未处理的流错误答案

【问题标题】：gulp-sass error: Unhandled stream error in pipegulp-sass 错误：管道中未处理的流错误
【发布时间】：2014-08-28 12:40:16
【问题描述】：

我正在使用 gulp-sass，但出现以下错误：

ESL@eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'

    at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
    at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)

这是我的 gulpfile.js：

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');

var theme_path = 'wp-content/themes/craig/';

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(theme_path+'scss/main.scss')
        .pipe(sass())
        // .pipe(minify({keepBreaks:true}))
        .pipe(minify())
        //.pipe(rename('style.css'))
        .pipe(gulp.dest(theme_path));
});

相同的 scss（文件）编译良好：sass --watch path/to/main.scss --compressed

我尝试使用另一个插件 (gulp-ruby-sass)，但它引发了不同的错误。

我做错了什么？

更新错误消息提到 _base.scss 中的第 13 行。这是该文件的内容：

//Setting breakpoints
$xsmall : 400px; 
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: ( 
    'xsmall' :'(max-width: #{$xsmall})',  //<--HERE IS LINE 13
    'small': '(max-width: #{$small})',
    // 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
    'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
    'large': '(min-width: #{$medium + 1})' 
);

【问题讨论】：

是不是因为你用过，而不是；分隔 $breakpoints 中的元素 ??
'xsmall' 之后和冒号之前的空格可能会让解析器误以为它有一个列表（不是映射），因为空格是列表中的有效分隔符。

标签： node.js sass npm gulp gulp-sass

【解决方案1】：

gulp-sass 不支持地图，请尝试使用您注释掉的gulp-ruby-sass。

将支持的是列表：

$breakpoint-keys: (
    'key_a',
    'key_b',
    'key_c'
);

$breakpoint-values: (
    'value_a',
    'value_b',
    'value_c'
);

但正如您将看到的，这些都是一维的。但是 maps（SASS 3.3.0 中的新功能，2014 年 3 月 7 日）将允许您使用键来使用当前使用的语法：

$breakpoints: ( 
    'key_a' : 'value_a',
    'key_b' : 'value_b',
    'key_c' : 'value_c' 
);

有关列表和地图的更多信息，请参阅这篇文章：http://viget.com/extend/sass-maps-are-awesome

【讨论】：