5-create-react-app整合antDesign功能

使用ant-design:

首先建立react項目：

create-react-app app

cd app

 

其次

AntDesign的高級配置：按需導入組件，自定義主題

 

1.下載依賴(利用yarn，或者npm都行)

yarn add react-router-dom    //裝路由插件

yarn add antd   //裝antd 插件 在 create-react-app 建立的工程中使用 antd 組件

yarn add react-app-rewired customize-cra    //react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案)

yarn add babel-plugin-import           //babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件

yarn add less less-loader       //按照 配置主題 的要求，自定義主題須要用到 less 變量覆蓋功能。

 

2.修改package.json

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

  }

- 表示要刪除的

+ 表示要添加的

 

 

3，在項目根目錄建立config-overrides.js

在項目根目錄建立一個 config-overrides.js 用於修改默認配置。（js配置文件須要修改）

module.exports = function override(config, env) {

  // do stuff with the webpack config...

  return config;};

 

 

 

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(

  fixBabelImports('import', {

    libraryName: 'antd',

    libraryDirectory: 'es',

    style: true,

  }),

  addLessLoader({

   javascriptEnabled: true,

   modifyVars: { '@primary-color': '#1DA57A' },

 }),

);