javascript Gulp less 没有正确处理包含，包含的变量未定义

Gulp less not handling includes properly, included variables not defined

提问by mikemaccana

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

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

My less works. When I run:

我的少作品。当我运行时：

lessc public/less/myapp.less

I get working output with no errors. All my less, including includes, is in public/less, BTW. Here is my gulpfile:

我得到了没有错误的工作输出。我所有的 less，包括包含在内，都在 public/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');
  });
});

When I run gulp, I get:

当我运行 gulp 时，我得到：

~/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 is defined, in a file imported at the start of myapp.less.

@brightblue 在 myapp.less 开头导入的文件中定义。

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

• Why isn't gulp picking up my includes? Specifying 'paths' option for less should make it work, but it isn't fixing it.
• What's a good way to debug this? I don't have a line number, for example.
• Is there a way to make gulp work?

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

回答by mikemaccana

The difference was whatI was compiling:

所不同的是什么，我编译：

• When I ran lessc myapp.less, I was compiling the main less file and it's dependencies
• When I ran gulpusing the gulpfile above, I was compiling each less file individually, because gulp.src was *.lessnot 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.

• 当我运行时lessc myapp.less，我正在编译主要的 less 文件及其依赖项
• 当我gulp使用上面的 gulpfile运行时，我正在单独编译每个 less 文件，因为 gulp.src*.less不是myapp.less. 由于这些 less 文件只从主要的 less 文件中加载，因此它们所依赖的东西没有 @imports（因为 myapp.less 依赖于它们）。例如，没有必要在每个单独的文件中导入“theme.less”，而不仅仅是先在 myapp.less 中导入它。

Here's the working version:

这是工作版本：

// 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');
  });
});

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

编辑：有关适用于最新gulp 的改进版本，请参阅下面的@noducks 答案。

回答by Sean McClory

Noticed a couple of gulp.rundeprecation warnings were popping up there. This fixes them, and adds some error handling. I have a slightly different directory structure.

注意到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']);

回答by user2331095

Here is my working version, using gulp-watchand gulp-connectfor live reload.

这是我的工作版本，使用gulp-watch和gulp-connect用于实时重新加载。

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());  
    }));
});

回答by Pierlo Upitup

Another cause might be that you're using @import (inline)in your main.less, which will cause the imported file to not be processed.

另一个原因可能是你使用@import (inline)你的main.less，这将导致无法处理导入的文件。

See http://lesscss.org/features/#import-options

请参阅http://lesscss.org/features/#import-options