Vite+vue2+antdv 1x 定制主题 和 less问题

前言

在 Vue 2 中使用 Vite 和 Ant Design Vue（antdv）并自定义主题颜色，你需要遵循以下步骤：

1. 安装依赖：

使用 npm 或 yarn 安装所需的依赖：

   npm install --save [email protected]
   npm install --save-dev  less@3 less-loader

或

   yarn add [email protected]
   yarn add --dev  less@3 less-loader

less@3 才行哦 如果是 less4 可能会报错格式问题

2. 配置 Vite：

   在项目根目录下创建或编辑 vite.config.js 文件，添加以下内容：

   import {createVuePlugin} from 'vite-plugin-vue2';
   
   export default {
    plugins: [createVuePlugin()
    ],
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // 在此处自定义主题变量
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
            // 或者引入自定义主题
            // hack: true; @import (reference) "${resolve('src/style/theme.less')}";,
          },
          javascriptEnabled: true,
        },
      },
    },
   };

   这里我们使用了 vite-plugin-style-import 插件来按需加载 antdv 的样式，并使用 less 和 less-loader 来处理和自定义主题颜色。

3. 在项目中引入和使用 Ant Design Vue：

   在你的 Vue 2 项目的入口文件（通常是 main.js 或 main.ts）中，引入并使用 Ant Design Vue：

   import Vue from 'vue';
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.less'; // 修改定制主题这里必须是引入 lses
   
   Vue.use(Antd);

   
   现在你已经成功地在 Vue 2 项目中使用了 Vite 和 Ant Design Vue，并自定义了主题颜色。你可以在 vite.config.js 文件中的 modifyVars 对象里修改更多的主题变量。更多关于 Ant Design Vue 主题定制的信息，请参考官方文档：https://1x.antdv.com/docs/vue/customize-theme-cn/