React 学习笔记 —— antd 的使用

步骤总结、antd的按需引入+自定主题

1. 安装依赖：
   yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2. 修改 package.json

....
			"scripts": {
				"start": "react-app-rewired start",
				"build": "react-app-rewired build",
				"test": "react-app-rewired test",
				"eject": "react-scripts eject"
			},
		....

3. 根目录下创建config-overrides.js

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

4. 备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css’应该删掉

接下来是详细使用。

安装使用

Ant Design官网

yarn add antd

引入使用

import React, { Component } from 'react'
import {Button} from 'antd'	// 引入需要的组件
import 'antd/dist/antd.css'	// 引入样式
export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">点我</Button>	// 使用
      </div>
    )
  }
}

按需引入配置

按需引入官网引导

• 安装 react-app-rewired 和 customize-cra

yarn add react-app-rewired customize-cra

• 修改 package.json 脚本命令配置

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

• 安装 babel-plugin-import —— 用于按需加载组件代码和样式的 babel 插件

yarn add babel-plugin-import

• 在 根目录 新建 config-overrides.js ，并编辑以下内容

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

• 移除 import 'antd/dist/antd.css'，因为不需要我们自己引入样式了
• 最后重新启动项目，可以看到，虽然没有自己引入样式，但组件还是正常呈现了
  
  

自定义主题

• 在按需引入配置的基础上，再做以下配置
• 安装 less、less-loader

yarn add less less-loader@6.0.0

• 修改 config-overrides.js 内容

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': 'tomato' },
    }
  }),
);

• 重启项目，即可看到按钮颜色改变