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

Posted 2023-03-07

【中文标题】使用 Vite 和 Antd Pro 布局时没有这样的文件或目录

【英文标题】：No such file or directory, when using Vite and Antd Pro Layout

【发布时间】：2021-06-25 02:49:36

【问题描述】：

使用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' 

有人可以帮我解决吗？

【问题讨论】：

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

【参考方案1】：

尝试像这样导入 antd 样式：

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

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

【参考方案2】：

我在 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。

---

参考：

https://github.com/theprimone/vite-react https://github.com/ant-design/ant-design/issues/7850 https://github.com/vitejs/vite/issues/2185#issuecomment-784637827

【讨论】：

当使用(name) => antd/es/$name/style``时，我的预捆绑时间已经及时增加，因为它是单独导入所有antd/es样式。可以通过使用name => antd/es/$name/style/index.less``来修复它。