解决create-react-app 项目引入 antd 样式不生效的情况，亲测有效！

最新推荐文章于 2023-07-04 18:31:53 发布

小五Ivy

最新推荐文章于 2023-07-04 18:31:53 发布

阅读量2.2k

点赞数

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

原文链接：https://blog.youkuaiyun.com/XinYe666666/article/details/100585642?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在项目中使用Ant Design并将其默认的Less样式更改为CSS样式。首先，你需要通过npm安装antd和babel-plugin-import。然后，通过修改webpack配置文件暴露配置，并在package.json中添加特定的babel配置，以确保antd组件使用CSS而非Less。

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

先安装 `antd`和`babel-plugin-import`

npm i/install antd --save
npm i/install babel-plugin-import --save-dev

因为antd默认引入样式是less，所以需要手动配置为CSS，配置方法如下：

运行 npm run eject暴露webpack.config.dev和webpack.config.prod文件
在package.json中配置以下代码

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
       ["import", {
         "libraryName": "antd",
         "libraryDirectory": "es",
         "style": "css"
       }]
     ]
  }