antd的使用

十.antd 框架的使用

1.参考3.xx版本，有入门介绍：https://3x.ant.design/docs/react/use-with-create-react-app-cn

在create-react-app中介绍 如何按需导入css ，和设置主题颜色

设置主体颜色的时候有个bug less-loader的版本可能太高

自己的文档步骤：

1. 下载安装包： cnpm i react-app-rewired customize-cra babel-plugin-import less less-loader@5.0.0

2. 在package.json文件中对一下代码进行修改（加号加上，减号代码去掉）

     /* 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",
     }
   

3. 去掉App.js中引入的css文件 import ‘antd/dist/antd.css’;

4. 在项目的根目录下创建一个文件 config-overrides.js , 加入一下代码

     // 配置具体的修改规则
     const { override, fixBabelImports, addLessLoader } = require('customize-cra');
     module.exports = override(
         fixBabelImports('import', {
             libraryName: 'antd',
             libraryDirectory: 'es',
             style: true,
         }),
         addLessLoader({
             javascriptEnabled: true,
             modifyVars: { '@primary-color': 'orange' },
         }),
     );
   

5. npm start 重启项目