React+vite引入antd并按需引入

明知山_

已于 2022-04-16 13:56:39 修改

阅读量6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

于 2022-04-15 15:48:06 首次发布

本文链接：https://blog.csdn.net/AK852369/article/details/124195919

React 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在Vite项目中安装和配置Ant Design，包括完整引入和按需引入的方式。通过`yarn add antd vite-plugin-imp`进行安装，并在`vite.config.js`中设置主题色及按需加载组件。示例中展示了如何修改`@primary-color`为#4377FE，以及使用`vite-plugin-imp`进行组件按需引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装antd

yarn add antd

完整引入

App.jsx
使用.less是为了方便设置主题色

import 'antd/dist/antd.less'

vite.config.js设置主题色

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#4377FE',//设置antd主题色
        },
      },
    }
  },
})

按需引入

yarn add vite-plugin-imp

删除掉import 'antd/dist/antd.less'
vite.config.js完整代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    react(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#4377FE',//设置antd主题色
        },
      },
    }
  },
})