Gulp配置：如何在Less中启用内联JavaScript

嘿，我之前也碰到过一模一样的问题！这个错误是因为Less默认禁用了内联JavaScript解析，咱们只需要在Gulp的Less编译配置里开启对应选项就能搞定。

步骤1：定位你的Gulp Less编译任务 #

先找到Gulpfile里负责编译Less的任务，通常长这样：

const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('compile-less', function() {
  return gulp.src('./src/less/**/*.less')
    .pipe(less()) // 这里就是Less编译的核心环节
    .pipe(gulp.dest('./dist/css'));
});

步骤2：添加javascriptEnabled配置项 #

在less()方法中传入配置对象，明确开启内联JS支持：

const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('compile-less', function() {
  return gulp.src('./src/less/**/*.less')
    .pipe(less({
      javascriptEnabled: true // 关键就是这一行！
    }))
    .pipe(gulp.dest('./dist/css'));
});

小补充 #

• 如果你还搭配了其他CSS处理插件（比如autoprefixer），别搞混了，这个配置是专门加在less()的参数里，不是其他插件的配置项。
• 这个逻辑和Webpack里的配置是相通的，都是告诉Less编译器允许解析内联的JS代码。

修改完之后重新运行Gulp构建任务，那个报错应该就消失啦！

内容的提问来源于stack exchange，提问作者siddhuKantipudi