在vue项目中如何修改less的变量

安装less和less-loader

在项目中安装less和less-loader两个依赖包：

npm install less less-loader --save-dev

配置webpack

在webpack配置文件中添加less-loader的配置项：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              modifyVars: {
                // 在这里添加需要修改的less变量
                '@primary-color': '#1DA57A'
              }
            }
          }
        ]
      }
    ]
  }
}

其中，modifyVars选项是用来设置需要修改的less变量的。例如，这里将@primary-color变量的值修改为#1DA57A。

重启项目

修改完less变量后，需要重新启动项目才能生效。

在vue组件中使用修改后的变量

在vue组件的样式中，可以直接使用修改后的less变量，例如：

<template>
  <div class="container">
    <h1 :style="{ color: '@primary-color' }">Hello World</h1>
  </div>
</template>

<style lang="less">
.container {
  background-color: @primary-color;
}
</style>

这里使用@primary-color变量设置了<h1>标签的颜色和.container的背景色。因为在webpack配置文件中已经将@primary-color变量修改为#1DA57A，所以在vue组件中使用时，显示的颜色也是修改后的值。