以下為學(xué)習(xí)react技術(shù)棧開發(fā)過程中，遇到的問題以及解決方法總結(jié)。各位看官請往下瞧！☆?（ゝ。?）

如何引入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"
      }
    ]
  ]
}

在這里插入圖片描述

再到命令行執(zhí)行

yarn eject

將react-scripts的配置釋放出來。

之后，

再到config/webpack.config.js文件中全局搜索找到babelrc配置項，將其設(shè)置為true（只有設(shè)置為true，才會從.babelrc中去讀取配置），默認為false。

在這里插入圖片描述

第四步：使用antd組件，重啟項目即可生效

快去試試吧！

問題：

成功引入antd后，只用antd UI組件返現(xiàn)樣式不生效？

解決：

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并不是這樣引入使用的，所以導(dǎo)致了class沒生效。