Question

我正在使用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})' 
);

Answer 1

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

支持的内容是列表：

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

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

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

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

有关列表和地图的详细信息，请参阅以下文章：http://viget.com/extend/sass-maps-are-awesome

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

1 个答案: