如何从JS文件更新Less变量？能否通过Less/Webpack/Gulp实现？

我现在有一段Less代码（random.less）：

@selectedValue: "20";
height: @selectedValue;

我希望在JS文件（random.js）里根据温度条件更新这个@selectedValue变量，逻辑是：

if (temperature > 25) @selectedValue = 400; else @selectedValue = 20;

想问问能不能用Less、Webpack或者Gulp实现这个需求？

当然可以实现！不过得先明确一个关键点：Less本身是编译时的预处理器，没法直接在运行时的JS代码里动态修改它的变量，但借助Webpack或Gulp这类构建工具，我们可以在编译阶段把JS逻辑转化为Less变量，或者换个思路在运行时实现类似效果。下面给你详细说几种可行的方案：

方案一：Webpack + less-loader 编译时注入变量 #

Webpack的less-loader支持通过additionalData选项，在编译Less代码前动态注入变量。步骤如下：

1. 在Webpack配置文件中，先写好你的温度判断逻辑（可以从环境变量、接口返回值或者本地计算获取温度值）；
2. 配置less-loader的additionalData，把动态生成的变量追加到Less代码开头：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              additionalData: (content) => {
                // 替换成你实际的温度获取逻辑
                const temperature = 28;
                const selectedValue = temperature > 25 ? 400 : 20;
                // 把变量注入到Less代码最前面
                return `@selectedValue: ${selectedValue};` + content;
              },
            },
          },
        ],
      },
    ],
  },
};

3. 之后你的random.less里可以删掉原来的@selectedValue定义，直接使用变量即可：

height: @selectedValue;

这种方式是在构建编译阶段就确定了变量值，适合构建时就能拿到温度条件的场景。

方案二：Gulp + gulp-less 动态覆盖变量 #

Gulp也能实现类似的编译时变量替换，借助gulp-less的modifyVars选项来覆盖Less中的变量：

1. 在Gulp任务中先处理温度判断逻辑，生成目标变量值；
2. 配置gulp-less的modifyVars参数，把变量传递进去：

// gulpfile.js
const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('compile-less', function() {
  // 替换成你实际的温度获取逻辑
  const temperature = 22;
  const selectedValue = temperature > 25 ? 400 : 20;

  return gulp.src('./random.less')
    .pipe(less({
      modifyVars: {
        'selectedValue': selectedValue
      }
    }))
    .pipe(gulp.dest('./dist/css'));
});

3. 你的random.less可以保留原来的变量定义（会被modifyVars覆盖），也可以直接使用变量。

运行时动态修改的替代思路 #

如果你的温度值是运行时才能获取的（比如用户设备的实时温度），那上面的编译时方案就不适用了。这时候可以换两种思路：

• 直接用JS操作DOM元素的style属性，动态修改height值；
• 提前在Less中定义多套样式类，比如：

.height-20 { height: 20px; }
.height-400 { height: 400px; }

然后用JS根据温度条件给目标元素切换对应的类名。

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