【发布时间】:2016-04-04 01:10:25
【问题描述】:
我目前正在构建一个项目并使用 Gulp 作为任务运行器,并使用 gulp-sass 作为 SASS 编译引擎。 问题是,每当我在我的 main.scss 文件中犯错误时,在文件末尾的其他描述的片段(下面的代码)中,一切都很顺利,gulp 处理 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 行的分号时,整个事情就会停止工作,没有任何日志,并且除非我修复它,否则拒绝 tu lauch。(示例)
[18:19:23] Starting 'sass'...
[18:19:23] Finished 'sass' after 3.18 ms
C:\test
任何想法是什么导致了这个错误?我知道最明显的解决方案是“在 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"]);
【问题讨论】:
-
我能够很好地运行您的存储库代码:$ gulp sass [17:19:09] 使用 gulpfile ~/projects/strangegulpbehaviour/gulpfile.js [17:19:09] 开始 'sass' ... [17:19:09] 11 毫秒后完成“sass” main.css:1409 main.css:1056
-
我在这里没有看到有问题的 Sass 的 minimal reproducible example。提供的代码会产生"Illegal nesting" 错误,并且链接仓库中的代码编译时不会出错。
标签: javascript sass gulp