2

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

1 回答 1

2

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

将支持的是列表：

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

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

但正如您将看到的，这些都是一维的。但是地图（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

于 2014-09-04T17:30:50.467 回答