vue中less使用js变量

在Vue项目中，要使用Less并引入JavaScript变量，你需要做以下几个步骤：

1. 安装依赖：首先确保已经在项目中安装了`vue-loader`和`less`及其插件`vue-less-loader`。可以使用npm或yarn进行安装：

   npm install vue-style-loader less-loader vue-less-loader --save-dev
   # 或者
   yarn add vue-style-loader less-loader vue-less-loader --dev

2. 配置`.vue`文件：在`.vue`组件的`<template>`标签外添加`<style lang="less">`，指定样式语言为Less。然后在`<style>`标签内可以开始使用Less语法，并通过`@import`导入包含JavaScript变量的文件。

<style lang="less">
@import "~@/styles/variables.less";

.btn {
  background-color: @primaryColor;
}
</style>

在这里，`variables.less`是一个包含定义的JavaScript变量的文件，例如：

// variables.less
@primaryColor: #007BFF; // 这里的值可以根据JavaScript动态设置

// ...其他变量定义...

3. 使用JavaScript变量：在Vue组件的`data()`函数中定义JavaScript变量，然后通过`this.$root`访问它们并在需要的地方设置。当在模板中引用这些变量时，记得将它们作为字符串传递给Less变量：

export default {
  data() {
    return {
      colorValue: '#ff0000', // JavaScript变量
    };
  },
  mounted() {
    this.$root.$set('primaryColor', this.colorValue); // 将变量绑定到根实例上，供全局使用
  }
}

现在你在Vue组件中就可以通过`<button class="btn" :class="{ primary: primaryColor === colorValue }">按钮</button>`这样的方式，利用`primaryColor`这个JavaScript变量控制按钮样式了。