在 gulp 任务中执行时，不会评估 Less (CSS) 计算

Question

我正在使用 LESS 文件，并使用 gulp 来编译 CSS。我注意到计算没有被评估。

例如以下少...

.footer-bar {   
    a {
        color: white;
        display: inline-block;
        padding-left: @grid-gutter-width / 2;
        text-decoration: none;
    }
}

... 在 CSS 文件中显示为...

.footer-bar a {
  color: white;
  display: inline-block;
  padding-left: 30px / 2;    /* <-- UNEVALUATED */
  text-decoration: none;
}

这是 gulp 设置...

function compileLessFile(path) {
    return gulp.src(`./${path}`)
        .pipe(less())
        .pipe(autoprefixer("last 1 ie version"))
        .pipe(gulp.dest("./"));
}

function watchLessChanges() {
    console.info("Watching .less files for changes...");
    gulp.watch(`${paths.watchableDirs}/*.less`).on("change", (path) => compileLessFile(path));
};

exports.default = watchLessChanges;

谁能解释一下为什么这些计算没有被

gulp-less

解决？

Answer 1

我发现如果我将

gulp-less

和

gulp-autoprefixer

设置回以前的版本，那么它就可以工作。

我正在使用...

• gulp-less

  ^5.0.0

• gulp-autoprefixer

  ^8.0.0

我把这些放回...

• gulp-less

  4.0.1

• gulp-autoprefixer

  7.0.1

...问题就消失了。

Answer 2

在我的例子中，将表达式包装到括号中，然后构建 LESS 解决了问题。

padding-left: (@panels-padding-horizontal + @icon-spacing + unit(@control-icon-size, px));

导致

padding-left: 66px;

gulpfile.js：

function buildCss(done) {
    return src(globalOptions.less.srcFiles.map(function (src) {
        return globalOptions.less.srcPath + src;
    }))
        .pipe(plumber(errorHandler))
        .pipe(mode.development(sourcemaps.init()))
        .pipe(less({
            paths: [
                globalOptions.less.srcPath
            ],
            strictMath: true
        }).on('error', util.log))
        .pipe(postcss([autoprefixer({ overrideBrowserslist: globalOptions.browsers })]))
        .pipe(( mode.production(cssmin()) ))
        .pipe(rename({ suffix: '.min' }))
        .pipe(mode.development(sourcemaps.write()))
        .pipe(dest(globalOptions.less.destPath))
        .on('end', done);
}

exports.buildCss = buildCss;

package.json：

  "devDependencies": {
    "autoprefixer": "9.7.6",
    "bower": "1.8.14",
    "fs": "^0.0.1-security",
    "gulp": "^5.0.0",
    "gulp-cli": "^3.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-less": "^5.0.0",
    "gulp-mode": "^1.1.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^10.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^5.0.1",
    "jscs": "3.0.7",
    "jshint": "2.11.0",
    "path": "^0.12.7"
  },