Javascript 未正确处理包含的、未定义包含的变量
我用的更少,咕噜声也更少,我开始大口吞咽 我的工作不多。当我跑步时:Javascript 未正确处理包含的、未定义包含的变量,javascript,css,less,gulp,gulp-less,Javascript,Css,Less,Gulp,Gulp Less,我用的更少,咕噜声也更少,我开始大口吞咽 我的工作不多。当我跑步时: lessc public/less/myapp.less 我得到的工作输出没有错误我所有的less,包括INCLUDE,都是公开的/less,顺便说一句。这是我的gulpfile: var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); gulp.task('compi
lessc public/less/myapp.less
我得到的工作输出没有错误我所有的less,包括INCLUDE,都是公开的/less,顺便说一句。这是我的gulpfile:
var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
gulp.task('compileLess', function () {
gulp
.src('./public/less/*')
.pipe(less({
paths: ['./public/less'], // Search paths for imports
filename: 'myapp.less'
}))
.pipe(gulp.dest('./public/css'));
});
// The default task (called when you run `gulp`)
gulp.task('default', function() {
gulp.run('compileLess');
// Watch files and run tasks if they change
gulp.watch('./public/less/*.less', function(event) {
gulp.run('less');
});
});
当我大口大口喝时,我得到:
~/Documents/myapp: gulp
[gulp] Using file /Users/me/Documents/myapp/gulpfile.js
[gulp] Working directory changed to /Users/me/Documents/myapp
[gulp] Running 'default'...
[gulp] Running 'compileLess'...
[gulp] Finished 'compileLess' in 11 ms
[gulp] Finished 'default' in 41 ms
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: variable @brightblue is undefined
@在myapp.less开始时导入的文件中定义了brightblue
@import "./colors.less";
body {
background-color: @brightblue;
}
- 为什么gulp不拿我的包裹?为less指定“path”选项应该可以让它工作,但它不能修复它
- 调试这个的好方法是什么?例如,我没有行号
- 有没有办法让吞咽起作用
- 当我运行
时,我正在编译主less文件及其依赖项lesscmyapp.less
- 当我使用上面的gulpfile运行
时,我分别编译了每个less文件,因为gulp.src是gulp
而不是*.less
。由于这些less文件仅从主less文件加载,因此它们所依赖的内容没有@imports(因为myapp.less依赖于它们)。例如,在每个单独的文件中导入,比如说,'theme.less',而不是首先在myapp.less中导入,是没有意义的myapp.less
// Run 'gulp' to do the important stuff
var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
var path = require('path');
gulp.task('less', function () {
gulp
.src('./public/less/myapp.less') // This was the line that needed fixing
.pipe(less({
paths: ['public/less']
}))
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./public/css'));
});
// The default task (called when you run `gulp`)
gulp.task('default', function() {
gulp.run('less');
// Watch files and run tasks if they change
gulp.watch('./public/less/*.less', function(event) {
gulp.run('less');
});
});
编辑:请参阅下面的@noducks answer,以了解与最新的gulp一起使用的改进版注意到出现了一些
gulp.run
弃用警告。这将修复它们,并添加一些错误处理。我有一个稍微不同的目录结构
'use strict';
var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
gulp.task('less', function() {
gulp
.src('./less/app.less')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
gutil.beep();
this.emit('end');
}))
.pipe(less())
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./css'));
});
gulp.task('less:watch', function(){
gulp.watch(['./less/*.less', './less/module/*.less'], ['less']);
});
gulp.task('default', ['less','less:watch']);
这是我的工作版本,使用
gulpwatch
和gulpconnect
进行实时重新加载
gulp.task('less:dev', function () {
gulp
.src('app/styles/**/*.less', {read: false})
.pipe(watch(function () {
return gulp
.src('app/styles/main.less')
.pipe(less())
.pipe(gulp.dest('app/styles/'))
.pipe(connect.reload());
}));
});
另一个原因可能是您在
main.less
中使用了@import(inline)
,这将导致导入的文件无法处理
请参见谢谢。我遇到了同样的问题。我明白我做错了什么,但我不知道如何正确地安排它+1.