create-react-app 中使用 [email protected]

安裝依賴

// 全局安裝 create-react-app，因為要經常使用yarn global add create-react-app 
複制代碼      

建立項目并安裝依賴

yarn create react-app react-antd

cd react-antd// 在 react-antd 項目中安裝 antdyarn add antd -S複制代碼      

自定義 create-react-app 的預設配置

當需要對create-react-app 的預設配置進行自定義時，[email protected]版本推薦使用 craco（一個對 create-react-app 進行自定義配置的社群解決方案）

現在我們安裝 craco 并修改 package.json 裡的 scripts 屬性。

 yarn add @craco/craco複制代碼      

/* package.json */"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}複制代碼      

然後在項目根目錄建立一個craco.config.js 用于修改預設配置。

/* craco.config.js */module.exports = {  // ...};複制代碼      

定制主題色并在項目中使用 less

按照 配置主題 的要求，自定義主題需要用到類似 less-loader 提供的 less 變量覆寫功能。我們可以引入 craco-less 來幫助加載 less 樣式和修改變量。

首先把src/App.css檔案修改為 src/App.less，然後修改樣式引用為 less 檔案。

/* src/App.js */- import './App.css';
+ import './App.less';複制代碼      

/* src/App.less */- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';複制代碼      

然後安裝craco-less并修改 craco.config.js 檔案如下。

 yarn add craco-less複制代碼      

const CracoLessPlugin = require('craco-less');module.exports = {  plugins: [
    {      plugin: CracoLessPlugin,      options: {lessLoaderOptions: {          lessOptions: {modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true,
          },
        },
      },
    },
  ],
};複制代碼      

這裡利用了 less-loader 的 modifyVars 來進行主題配置，變量和其他配置方式可以參考 配置主題 文檔。修改後重新開機 yarn start，如果看到一個綠色的按鈕就說明配置成功了。

antd 内建了深色主題和緊湊主題，你可以參照 使用暗色主題和緊湊主題 進行接入。

同樣，你可以使用 react-app-rewired 和 customize-cra 來自定義 create-react-app 的 webpack 配置。

按需導入 antd 元件樣式

yarn add babel-plugin-import複制代碼      

babel: {     plugins: [
        ["import", 
            {"libraryName": "antd","libraryDirectory": "es",                 "style": true //設定為true即是less }
         ]
     ]
},複制代碼