以下为学习react技术栈开发过程中,遇到的问题以及解决方法总结。各位看官请往下瞧!☆〜(ゝ。∂)

如何引入antd

第一步:安装antd
yarn add antd -S
第二步:安装babel-plugin-import,让antd样式按需加载
yarn add babel-plugin-import -S
第三步:配置babel-plugin-import的方式有两种
方式一:配置package.json

在根目录下的package.json的label下的presets后面添加

"plugins":[["import"{"libraryName": "antd", "style": "css"}]]

如下所示:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }
方式二:新建.babelrc文件配置

在根目录下新建文件.babelrc,再将package.json中的“babel”对象全部删除。在.babelrc中配置

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

在这里插入图片描述
再到命令行执行

yarn eject

将react-scripts的配置释放出来。

之后,

再到config/webpack.config.js文件中全局搜索找到babelrc配置项,将其设置为true(只有设置为true,才会从.babelrc中去读取配置),默认为false。
在这里插入图片描述

第四步:使用antd组件,重启项目即可生效

快去试试吧!

问题:

成功引入antd后,只用antd UI组件返现样式不生效?

解决:

  1. 按照上面步骤,从上往下检查一下,看是否babel-plugin-import配置正确?
  2. 若你babel-plugin-import是按照方式二配置的,且babel配置没有问题,那么请在config/webpack.config.js文件中找一下test: cssRegex,这个配置,是否有配置
 modules: {
       getLocalIdent: getCSSModuleLocalIdent,
  },

若有请去掉这个配置,再重启,就ok了
在这里插入图片描述

原因:
getCSSModuleLocalIdent是让css模块化的配置,就是说配置上后,你要在页面中使用css,得这样用
在这里插入图片描述
使用"对象."的方式获取class。

因为加上了getCSSModuleLocalIdent,而antd组件中css并不是这样引入使用的,所以导致了class没生效。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐