vue3 vite配置less的方法

在 Vue 3 和 Vite 项目中配置 Less，你需要遵循以下步骤：

1. 安装 Less

首先，你需要在项目中安装 Less 。在项目的根目录下运行以下命令：

yarn add less --save-dev

2. 配置 Vite 以支持 Less

Vite 默认支持 Less，所以通常你不需要进行额外的配置。然而，如果你需要自定义 Less 的选项，你可以在 vite.config.js 文件中进行配置。例如：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        // 这里可以配置 Less 的选项
      },
    },
  },
})

3. 在组件中使用 Less

现在你可以在 Vue 组件中使用 Less 了。例如，你可以创建一个 .vue 文件，并在 <style> 标签中指定 lang="less"：

<template>
  <div class="my-component">Hello, Vue 3 with Less!</div>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style lang="less">
.my-component {
  color: @primary-color; // 使用 Less 变量
  font-size: 16px;
}
</style>

这样，你就成功地在 Vue 3 和 Vite 项目中配置了 Less。如果你遇到任何问题或需要进一步的自定义配置，请查阅 Vite 和 Less 的官方文档以获取更多信息。

本文地址：https://www.tides.cn/p_vue-vite-config-less