Less 吞咽能改变更少的变量吗？

我希望在我的LESS文件中切换IE8模式，并在Gulp中自动生成文件

这就是我停下来的地方，我想少喝一口（减去一堆东西）：

Gulp中是否不支持变量修改

---

如果可以的话，我想避免使用gulp modify等。我希望将构建系统从源文件中抽象出来。

modifyVars现在为我工作：

    ...

    var LESSConfig = {
        paths: paths.LESSImportPaths,
        plugins: [
            LESSGroupMediaQueries,
            LESSautoprefix
        ],
        modifyVars: {
            ie: 'false'
        }
    };

    var LESSConfigIE = {
        paths: paths.LESSImportPaths,
        modifyVars: {
            ie: 'true'
        }
    };

    function processLESS (src, IE, dest){
       return gulp.src(src)
         .pipe( $.if( IE, $.less( LESSConfigIE ), $.less( LESSConfig ) ) )
         .pipe( $.if( IE, $.rename(function(path) { path.basename += "-ie"; }) ) )
         .pipe( gulp.dest(dest) )
    }

    // build base.css files
    gulp.task('base', function() {
         return  processLESS( paths.Base + '/*.less', false, paths.dest );
    });

     // build base-ie.css files for IE
     gulp.task('baseIE', function() {
         return  processLESS( paths.Base + '/*.less', true, paths.dest );
     });

---

由于我无法使用

globalVars

实现这一点，而且

globalVars

和

modifyVars

的应用程序显然都失败了，因此我提出了一个不同的解决方案

在

gulp-less

处理变量之前，可以使用

gulp-append-prepend

将变量写入文件。有点不那么优雅，但从好的方面来说，它确实有效

大概是这样的：

gulp.src('main.less')
    .pipe(gap.prependText('@some-global-var: "foo";'))
    .pipe(gap.appendText('@some-modify-var: "bar";'))
    .pipe(less())
    .pipe(gulp.dest('./dest/'));

如今（2019年），这一问题似乎已得到解决。 然而，我还是花了很多时间来运行它。 以下是我所做的：

gulp.task('lessVariants', ['less'], function() {
    return gulp.src('less/styles.less', {base:'less/'})
        .pipe(less({modifyVars:{'@color1': '#535859'}))
        .pipe(less({modifyVars:{'@color2': '#ff0000'}))
        .pipe(less({modifyVars:{'@color3': '#ccffcc'}))
        .pipe(rename('styles.modified.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(distFolder + 'css'))
})

这不起作用。只修改了最后一个变量。为了使其正常工作，我对其进行了如下更改：

gulp.task('lessVariants', ['less'], function() {
    return gulp.src('less/styles.less', {base:'less/'})
        .pipe(less({modifyVars: {
            '@color1': '#535859',
            '@color2': '#ff0000',
            '@color3': '#ccffcc',
        }}))
        .pipe(rename('styles.variant.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(distFolder + 'css'))
})

---

为什么这对你有用？为什么这个功能适用于你而不适用于我？澄清一下，这个功能似乎被破坏了。我的输出表明

gulpless

首先处理less文件，然后附加新变量。因此，您最终得到的是一个css文件，该文件末尾附加了较少的变量。很明显，它不起作用。很抱歉耽搁了。我不知道该说什么，但这对我来说仍然有效。我使用的是最新版本。我的main.less以@import“variables.less”开头-因此，如果我预先添加了任何内容，它将被覆盖。@Gerfried我已经有一段时间没有使用Gulp了，但是…你是说这个bug两年后还没有修复吗？希望我的解决方案不再需要了。好吧，如果这仍然是一个问题，也许你可以去掉导入，只使用Gulp将variables.less和main.less与你需要的任何额外的东西组合在一起？我认为它现在可以工作了-但是关于你的第二个片段，我仍然有一些问题（见我的答案）：它应该是这样的吗？（即，

modifyVars

可能/应该是一个常规的JS对象。虽然您编写的方式仍然会返回）。@seven phases max您说得很对-谢谢，我更新了我的示例代码，这很有意义。老实说，当看到第一个块时，我在想“为什么不将所有这些变量组合成一个对象？”。我相信这样做也会稍微有效一些（尽管除非有数百个变量，否则您可能不会注意到）。

gulp.task('lessVariants', ['less'], function() {
    return gulp.src('less/styles.less', {base:'less/'})
        .pipe(less({modifyVars: {
            '@color1': '#535859',
            '@color2': '#ff0000',
            '@color3': '#ccffcc',
        }}))
        .pipe(rename('styles.variant.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(distFolder + 'css'))
})