Gulp less 未正确处理包含未定义的包含变量 [英] Gulp less not handling includes properly, included variables not defined

问题描述

我正在使用 less 和 Grunt，并且正在转向 gulp.

I am using less and Grunt, and am moving to gulp.

我的少工作.当我跑步时:

My less works. When I run:

lessc public/less/myapp.less

我得到了没有错误的工作输出.我所有的 less，包括 include，都是 public/less，顺便说一句.这是我的 gulpfile:

I get working output with no errors. All my less, including includes, is in public/less, BTW. Here is my 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');
  });
});

当我运行 gulp 时，我得到:

When I run gulp, I get:

~/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

@brightblue 在 myapp.less 开始处导入的文件中定义.

@brightblue is defined, in a file imported at the start of myapp.less.

@import "./colors.less";
body {
  background-color: @brightblue;
}

• 为什么 gulp 不接收我的包含?为 less 指定 'paths' 选项应该可以让它工作，但它并没有修复它.
• 有什么好的调试方法?例如，我没有行号.
• 有没有办法让 gulp 工作?

推荐答案

不同之处在于 我正在编译:

The difference was what I was compiling:

• 当我运行 lessc myapp.less 时，我正在编译主 less 文件及其依赖项
• 当我使用上面的 gulpfile 运行 gulp 时，我正在单独编译每个 less 文件，因为 gulp.src 是 *.less 而不是 myapp.less.由于这些 less 文件仅从主 less 文件加载，因此它们没有 @imports 用于它们所依赖的东西(因为 myapp.less 依赖于它们).例如，在每个单独的文件中导入theme.less"而不是先在 myapp.less 中导入它是没有意义的.
• When I ran lessc myapp.less, I was compiling the main less file and it's dependencies
• When I ran gulp using the gulpfile above, I was compiling each less file individually, because gulp.src was *.less not myapp.less. Since these less files are only ever loaded from the main less file, they didn't have @imports for the things they depend on (because myapp.less depends on them). Eg, there's no point importing, say, 'theme.less' in every individual file rather than just importing it first in 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 回答，了解适用于最新 gulp 的改进版本.

see @noducks answer below for an improved version that works with the latest gulp.

这篇关于Gulp less 未正确处理包含未定义的包含变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！