Vite 全局注入 Less 变量：modifyVars 与 additionalData 区别

场景

修改全局注入的 less 变量没有生效

步骤

全局的 variables.less 内容如下

@main-color: blue;

vite.config.ts 中配置的 less 变量注入方法如下

{
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "src/styles/variables.less";`;
        }
      }
    }
  }
}

业务页面想要使用自己的 @main-color 变量

<template>
  <div class="home">home</div>
</template>

<style lang="less" scoped>
@main-color: red;

.home {
  background: @main-color;
}
</style>

最终发现，@main-color 使用的仍旧是 src/styles/variables.less 中的全局变量

原因

我们在注入 less 变量时使用的是如下 modifyVars 的方式注入的。

{
  modifyVars: {
    hack: `true; @import (reference) "src/styles/variables.less";`;
  }
}

那么 modifyVars 到底是干什么的呢？

• 作用： modifyVars 用于修改 less 的全局变量。
• 用法： 你可以使用 modifyVars 选项直接传递一个对象，该对象包含要修改的 less 变量。

示例：如下代码在全局中的 primary-color 和 secondary-color 就被 modifyVars 中的对象定义了

{
  modifyVars: {
    'primary-color': '#3498db',
    'secondary-color': '#2ecc71',
  }
}

所以 modifyVars 这种方式注入的变量，本身就不支持修改，因为它就是修改全局变量的。

解决方法

vite.config.ts 中 less 的配置如下

{
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "src/styles/variables.less";`;
      }
    }
  }
}

additionalData：

• 作用： additionalData 用于在每个 less 文件的开头插入额外的 less 代码，通常用于全局导入变量或 mixins。
• 用法： 你可以在 additionalData 中指定要插入的 less 代码，就像你在样式表中手动添加一样。

所以当解析我们 vue 中的 less 时，最终其实是下面这样的

<style lang="less" scoped>
@import 'src/styles/variables.¡∑¡less';

@main-color: red;

.home {
  background: @main-color;
}
</style>

相当于全局的 less 变量文件在最上方，我们自定义的 less 变量在其下方，自然就覆盖了全局变量。

需要注意的是，additionalData 由于注入的是一个 less 文件，所以如果你在这个文件中写了一些不是变量或者 less 函数之外固定的代码，如(.test {color: red})， 那么这段代码则会在每个 less 文件的头部都插入。

总结

• 如果你只是需要修改全局变量，使用 modifyVars 是更直接的方式。
• 如果你需要在每个 less 文件中都引入一些共享的代码，那么 additionalData 更适合。