vite4+vue2+vant2+less构建项目，按需加载定制主题配置说明

步骤1：安装vant2、consola、less、vite-plugin-style-import

说明：

1. 因为vant2需要consola，所以必装；
2. 安装加载vant组件样式，必装：vite-plugin-style-import，版本注意是2.0以上

 

步骤2：vite.config.js配置：

// vite.config.js

import fs from 'node:fs';
import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import {createStyleImportPlugin, VantResolve} from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 按需导入vant组件
        createStyleImportPlugin({
            // resolves: [VantResolve()]
            libs: [
                {
                    libraryName: 'vant',
                    esModule: true,
                    default:false,
                    resolveStyle: (name) => {
                        return `vant/es/${name}/style/less.js`;
                    }
                }
            ]
        })
    ],
    css: {
        devSourcemap: true,
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
                modifyVars: {
                    hack: `true; @import "${path.resolve(__dirname, './src/assets/css/自定义主题.less')}";`
                }
            }
        }
    },
    resolve: {
        // 以下别名必须设置，不然启动报错
        alias: [
            {
                find: /^~/,
                replacement: '',
            },{
                find: '@',
                replacement: path.resolve(__dirname, 'src'),
            },
        ]
    }
});