create-react-app项目所遇问题总结之antd引入和样式不生效问题解决

以下为学习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没生效。