在Vue3 + Vite项目中使用less

在Vue3 + Vite项目中使用less，需要安装less和less-loader两个依赖。

首先，在项目根目录下执行以下命令安装less和less-loader：

npm install less less-loader --save-dev

安装完成后，在vite.config.js配置文件中添加以下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},
})

这样就完成了less的配置。你可以在Vue组件中直接使用less语法编写样式了，例如：

<template><div class="container"><h1 class="title">Hello World</h1></div>
</template><style lang="less" scoped>
.container {background-color: red;
}.title {color: blue;
}
</style>

注意，如果你使用了scoped属性，需要在style标签中添加lang="less"来指定使用less语法。如果没有使用scoped属性，可以直接在style标签中编写less样式。