React降級配置及Ant Design配置

天藍藍tao發表於2019-03-02

React降級配置

1.使用create-react-app建立一個目錄

React降級配置及Ant Design配置

2.檢視當前目錄下的package.json檔案中的配置

React降級配置及Ant Design配置

注意:

可以看到當前的react-scripts是2.1.2版本,且只相容IE11以上,所以為了更好地相容IE瀏覽器,我們需要做降級配置

3.進入目錄,在master分支下進行配置(如果建立好的目錄中沒有.git檔案,使用git init初始化目錄)

注意:

之所以要在master分支下進行配置,是為了在下文中執行 npm run eject

4.將原來的react-script刪除

React降級配置及Ant Design配置

5.重新安裝對應版本(比如1.x的版本,比較穩定的版本)

React降級配置及Ant Design配置

6.新增git庫(將以上做的修改新增到git庫,這也是為什麼如果沒有.git檔案,一定要先初始化)

React降級配置及Ant Design配置

7.執行npm run eject(如果有報錯,可以不用管,只要有ejected successfully就可以)

React降級配置及Ant Design配置

8.由於重新配置可以先刪除node-moduls,然後在 npm i重新安裝依賴

React降級配置及Ant Design配置

9.npm start,檢視是否能執行(可能會報錯,解決方法再下面)

10.刪除package.json中的browserslist(因為這個配置是react-scripts2.x版本的,再降級以後,需要刪除這段程式碼)

React降級配置及Ant Design配置

配置less

1.src中內容可以都刪除,留下index.js

React降級配置及Ant Design配置

2.建立一個App.js(此時檢視是否能執行,顯示App.js的內容)

React降級配置及Ant Design配置
React降級配置及Ant Design配置

3.建立App.less,並將檔案引入到App.js中(import `./App.less`)

React降級配置及Ant Design配置

4.安裝less包

React降級配置及Ant Design配置

5.進行less檔案的配置,找到config中的dev檔案中的CSS的配置

React降級配置及Ant Design配置

6.複製一份到css配置檔案的下方,進行下圖中的修改(已經是修改過的)

React降級配置及Ant Design配置

7.配置完選項,需要重啟專案才能生效

此時配置的less已經生效

React降級配置及Ant Design配置

Ant Design 配置

1.安裝antd

React降級配置及Ant Design配置

2.安裝按需載入元件程式碼和樣式的外掛

React降級配置及Ant Design配置

3.在package.json的babel中配置(注意要在babel中進行配置,不要寫在babel外面去了)

React降級配置及Ant Design配置

4.測試引用button為例(先重啟)

React降級配置及Ant Design配置
React降級配置及Ant Design配置

5.配置ant中的樣式變數

React降級配置及Ant Design配置

以下是可以配置的樣式變數

React降級配置及Ant Design配置

6.除了第5條的配置的方法,還可以引入配置(新建配置檔案color.js在config檔案中)

React降級配置及Ant Design配置
React降級配置及Ant Design配置

7.在dev中引入colors.js,再呼叫

8.在prod中和dev中一樣修改less、引入預設colors

9.最後npm run build檢查是否會出錯

相關文章