react中antd的引用完整流程介紹

今天的第二篇小記來了。
antd官網中有關於react中導入antd的介紹javascript

https://ant.design/docs/react/use-with-create-react-app-cn

可是卻沒有獲得咱們想要的效果。
錯誤以下:The "injectBabelPlugin" helper has been deprecated as of v2.0
解決辦法以下:https://github.com/ant-design...
可是我仍是把流程寫下吧,須要自取喲!
第一步:npm i antd --save
第二步:npm i react-app-rewired -D 後更改package.json文件css

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

第三步:安裝按需加載插件 npm install babel-plugin-import
第四步: npm install customize-cra --save
第四步:在項目根目錄建立一個 config-overrides.js 用於修改默認配置。java

const {
      override,
     fixBabelImports
   } = require("customize-cra");
   
   module.exports = override(
     fixBabelImports("babel-plugin-import", {
       libraryName: "antd",
       style: "css"
     })
   );

以上流程介紹完畢,antd官網關於這方面的介紹須要更新啦。。。
若是須要less等支持,仍是須要參考官網的,請你們積極查閱相關資料啦!本文就不作敘述啦,嘻嘻嘻!react

相關文章
相關標籤/搜索