antd - 没有那个文件或目录，当使用 Vite 和 Antd Pro Layout 时

Question

没有那个文件或目录，当使用 Vite 和 Antd Pro Layout 时
这是文件vite.config.ts:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';
import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => {
            return `antd/lib/${name}/style/index.less`;
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          ...{
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
        },
      },
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
  optimizeDeps: {
    include: ['@ant-design/icons'],
  },
});

这是我在 vite 中使用 antd、antd-pro-layout 的配置。
但我收到了错误:

[vite] Internal server error: ENOENT: no such file or directory, open 
'/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less' 

有人可以帮我修复它吗？

Answer 1

尝试像这样导入 antd 样式:

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      style: (name) => `antd/es/${name}/style`,
    },
  ],
}),

更多关于 Vite + React + Ant Design 或其他 UI 库的使用，这个 repo theprimone/vite-react可能会给你或多或少的灵感。