如何在Vite.js的vite.config.js中配置less-loader适配Ant Design v4？

核心前提：Vite无需手动配置less-loader #

Vite内置了对Less等预处理器的支持，不需要额外安装less-loader，只需要确保项目里装了less依赖就行。你的两种配置里，第二种自定义less插件完全多余，反而会和Vite的内置处理逻辑冲突，导致失效。

正确配置步骤： #

1. 安装Less依赖
   打开终端执行：

npm install less --save-dev

2. 修改vite.config.js配置
   保留@vitejs/plugin-react，只需要在css.preprocessorOptions.less里开启javascriptEnabled，如果需要自定义Ant Design主题，还可以添加主题变量：

import react from '@vitejs/plugin-react';

export default {
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        // 必须开启，因为Ant Design的Less文件包含JS表达式
        javascriptEnabled: true,
        // 可选：自定义Ant Design主题变量，比如修改主色
        modifyVars: {
          '@primary-color': '#1890ff',
          '@link-color': '#1890ff',
          // 更多主题变量可参考Ant Design v4官方文档
        },
      },
    },
  },
};

3. 正确引入Ant Design样式
   在项目入口文件（比如src/main.jsx/src/main.tsx）里，替换原有的CSS引入为Less源文件：

// 替换原来的 'antd/dist/antd.css'
import 'antd/dist/antd.less';

排查常见问题： #

• 如果你之前装过less-loader或者自定义过Less相关插件，先卸载/移除，避免冲突：

  npm uninstall less-loader
  

• 确保所有.less文件的引入路径正确，Vite会自动处理后缀为.less的文件
• 配置修改后重启Vite开发服务器，确保配置生效

学习Vite配置的参考方向 #

优先看Vite官方文档的CSS预处理器章节，里面详细说明了预处理器的配置方式、内置特性以及和框架插件的配合逻辑。另外Ant Design v4官方文档里也有针对Vite的配置指南，重点关注主题定制部分。

内容的提问来源于stack exchange，提问作者GisCat