vue使用less

Vue可以使用Less作为CSS预处理器。下面是使用Vue和Less的步骤：

1. 安装less和less-loader

在项目目录下执行以下命令安装：

npm install less less-loader --save-dev

2. 在Vue组件中使用Less

在Vue组件的`<style>`标签中使用`lang="less"`来指定使用Less，例如：

<template>
  <div class="wrapper">
    <h1>{{ message }}</h1>
  </div>
</template>

<style lang="less">
.wrapper {
  background-color: #f2f2f2;
  padding: 20px;
  h1 {
    font-size: 24px;
    color: #333;
  }
}
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

3. 在Vue配置中配置Less

在`vue.config.js`文件中进行如下配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 如果使用了 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
          modifyVars: {
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "~~/src/assets/css/variable.less";`,
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

这里的`modifyVars`选项用于覆盖Less中的变量，可以在这里定义自己的变量，例如：

modifyVars: {
  'primary-color': '#1DA57A',
  'link-color': '#1DA57A',
  'border-radius-base': '2px',
}

这样就可以在Less中使用这些变量了。

希望对你有所帮助！