3

使用 Vite 和 Antd Pro 布局时没有这样的文件或目录

这是文件 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'

有人可以帮我解决吗？

4

2 回答 2

3

在 Vite 中使用 React + Antd 时遇到了一些问题。

感谢@theprimone 的回答。但答案是不完整的。我将在这里完成答案。

第一次，向 Less Preprocessor 添加额外的配置：

将此配置添加到您的vite.config.js文件中：

{
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
}

二、设置模块别名修复Less@import问题：

同样，将以下配置添加到您的vite.config.js文件中：

{
  resolve: {
    alias: [
      { find: /^~/, replacement: "" },
    ],
  },
}

最后，安装vite-plugin-imp插件解决Antd ES 问题：

安装vite-plugin-imp依赖项：

pnpm add -D vite-plugin-imp

# or

npm i -D vite-plugin-imp

vite.config.js然后，在您的文件中设置插件：

{
  plugins: [
    // React plugin here
    
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ];
}

文件中的最终配置vite.config.js将如下所示：

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

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      { find: /^~/, replacement: "" },
    ],
  },
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
});

也可以与@preact/preset-vite.

参考：

于 2021-07-04T14:16:38.807 回答
2

尝试像这样导入 antd 样式：

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

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

于 2021-04-09T09:40:57.250 回答