React降級配置及Ant Design配置詳解
React降級配置
1.使用create-react-app創(chuàng)建一個目錄
2.查看當前目錄下的package.json文件中的配置
注意：
可以看到當前的react-scripts是2.1.2版本，且只兼容IE11以上，所以為了更好地兼容IE瀏覽器，我們需要做降級配置
3.進入目錄，在master分支下進行配置（如果創(chuàng)建好的目錄中沒有.git文件，使用git init初始化目錄）
注意：
之所以要在master分支下進行配置，是為了在下文中運行 npm run eject
4.將原來的react-script刪除
5.重新安裝對應版本(比如1.x的版本，比較穩(wěn)定的版本)
6.添加git庫（將以上做的修改添加到git庫，這也是為什么如果沒有.git文件，一定要先初始化）
7.運行npm run eject（如果有報錯，可以不用管，只要有ejected successfully就可以）
8.由于重新配置可以先刪除node-moduls，然后在 npm i重新安裝依賴
9.npm start,查看是否能運行(可能會報錯，解決方法再下面)
10.刪除package.json中的browserslist(因為這個配置是react-scripts2.x版本的，再降級以后，如果還存在，代碼運行會報錯)
配置less
1.src中內容可以都刪除，留下index.js
2.創(chuàng)建一個App.js（此時查看是否能運行，顯示App.js的內容）
3.創(chuàng)建App.less，并將文件引入到App.js中（import './App.less'）
4.安裝less包
5.進行l(wèi)ess文件的配置，找到config中的dev文件
6.找到里面的css的配置，復制一份到css配置文件的下方，將loader中css換成less-loader以及options為以下內容
7.配置完選項，需要重啟項目才能生效
此時配置的less已經生效
Ant Design 配置
1.安裝antd
2.安裝按需加載組件代碼和樣式的插件
3.在package.json的babel中配置（注意要在babel中進行配置，不要寫在babel外面去了）
4.測試引用button為例（先重啟）
5.配置ant中的樣式變量
以下是可以配置的樣式變量
6.除了第5條的配置的方法，還可以引入配置（新建配置文件color.js在config文件中）
7.在dev中引入colors.js，再調用
8.在prod中和dev中一樣修改less、引入默認colors
9.最后npm run build檢查是否會出錯
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React 高階組件應用，詳細的介紹了什么是React高階組件和具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
React 模塊聯(lián)邦多模塊項目實戰(zhàn)詳解
這篇文章主要介紹了React 模塊聯(lián)邦多模塊項目實戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
詳解如何在項目中使用jest測試react native組件
本篇文章主要介紹了詳解如何在項目中使用jest測試react native組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了react使用.env文件管理全局變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了React中Portals與錯誤邊界處理實現(xiàn)，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
React+hook實現(xiàn)聯(lián)動模糊搜索
這篇文章主要為大家詳細介紹了如何利用React+hook+antd實現(xiàn)聯(lián)動模糊搜索功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要介紹了React 實現(xiàn)車牌鍵盤的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了React組件渲染后對DOM的操作方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
SOLID?是一套原則，它們主要是關心代碼質量和可維護性的軟件專業(yè)人員的指導方針，本文給大家分享如何在React中應用SOLID原則，感興趣的朋友一起看看吧2022-07-07