由SASS错误引起的奇怪的吞咽事故

时间:2016-04-03 16:39:23

标签: javascript sass gulp

我目前正在构建一个项目并使用Gulp作为任务运行程序,并将gulp-sass用作SASS编译引擎。 问题是,每当我在我的main.scss文件中犯错,在文件末尾的其他描述的片段(下面的代码)中,一切顺利,gulp handeles sass错误按预期,并继续功能。(例如下面的例子)

[18:14:28] Starting 'sass'...
[18:14:28] Finished 'sass' after 3.25 ms
Error in plugin 'sass'
Message:
    src\sass\main.scss
Error: Invalid CSS after "    margin": expected "}", was ": 0;"
        on line 37 of stdin
>>     margin: 0;
   ----^

但是当它是第65行的分号时,整个事情就会停止工作,没有任何记录,除非我修复它,否则拒绝使用它。(例)

[18:19:23] Starting 'sass'...
[18:19:23] Finished 'sass' after 3.18 ms

C:\test

任何想法导致此错误的原因是什么?我知道最明显的解决方案是#no; noy承诺在sass"中犯错误,但我仍然希望解决它。

节点版本5.9.1。
操作系统 - Windows 10.
https://bitbucket.org/gentos/strangegulpbehaviour如果需要重现错误,我还会将一个麻烦的sass和gulpfile文件放入一个迷你项目中。
提前感谢您的时间和帮助!

此代码位于我的任何主要gulp文件的末尾,导致描述的行为。删除了无休止的休息时间。

nav{
    position: fixed
    ul{
      li{
      }
    }
} 

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    cleanCSS = require('gulp-clean-css');
    browserSync = require("browser-sync"),
    gutil = require('gulp-util'),
    reload = browserSync.reload;

var path = {
    build: { 
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        image: 'build/img/'

    },
    src: { 
        html: 'src/*.html', 
        js: 'src/js/**/*.js',
        sass: 'src/sass/**/*.scss',
        css: 'src/css/**/*.css',
        image: 'src/img/*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        sass: 'src/sass/*',
        css: 'src/css/**/*.css',
        image: 'src/img/*'
    },
    clean: './build'
};


function handleErrors() {
  var gutil = require('gulp-util');
  var args = Array.prototype.slice.call(arguments);

  gutil.log(gutil.colors.white.bgRed.underline.bold('Gulp error:'));
  gutil.log(gutil.colors.red(args));

  this.emit('end');
}
gulp.task('html',function(){
    gulp.src(path.src.html)
    .pipe(gulp.dest(path.build.html))
    .pipe(reload({stream: true}));
});

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: [path.build.html]
        }
    });
});



gulp.task('sass',function(){                
  gulp.src('./src/sass/main.scss')
    .pipe(sass({includePaths: ['./src/sass']}).on('error', sass.logError))  
    .pipe(sass().on('error', sass.logError))
    .pipe(cleanCSS({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
    .pipe(gulp.dest(path.build.css))
    .pipe(reload({stream: true}));

});



gulp.task('watch', function(){
    watch([path.watch.sass], function(event, cb) {
        gulp.start('sass');
    });
});


gulp.task('default', ["sass", "html", "browser-sync" ,"watch"]);    

1 个答案:

答案 0 :(得分:0)

运行此命令并重置Universe

npm install gulp-sass

或追踪错误

sass --trace --watch input.scss:output.css