在vue中修改less的变量值

在Vue中修改LESS的变量值，需要通过以下几个步骤：

安装less-loader和less

在项目中安装less-loader和less，可以使用npm或yarn进行安装：

npm install less-loader less --save-dev

或者

yarn add less-loader less --dev

配置webpack

在webpack配置文件中，添加对less文件的处理规则，并配置less-loader：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  }
}

修改less变量

在less文件中定义变量，例如：

@primary-color: #1890ff;

在Vue组件中引入该less文件，并修改变量的值：

<template>
  <div class="hello-world">
    <h1 :style="{ color: primaryColor }">Hello World</h1>
  </div>
</template>

<script>
import './style.less'

export default {
  data() {
    return {
      primaryColor: '#1890ff'
    }
  },
  mounted() {
    // 修改变量值
    this.primaryColor = '#f5222d'
  }
}
</script>

这样，在组件挂载后，LESS变量的值就会被修改为#f5222d，并且组件中使用该变量的样式也会自动更新。