第一步
和往常一样,第一步首先要做的就是进行一波插件的安装,这里我们要用到的插件有:
antd – 使用antd当然要先引入antd啦
react-app-rewired – 这是一个对create-react-app脚手架进行自定义配置的社区解决方案
customize-cra – 这个是为了能够使用react-app-rewired@2.x而需要的插件
babel-plugin-import – 这个是按需加载组件代码和样式的Babel插件,可以很好的解决前端的性能问题
less & less-loader – 这是我们的老朋友了
//安装一下需要的插件
yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader
第二步
第二步需要更改一下package.json文件,很简单,只需要将:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
}
更改为:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
就可以啦
第三步
第三步是跟关键的一步,首先我们需要在根目录下创建一个叫做config-overrides.js的文件,然后再里面填入:
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
//写了下面这个部分,就实现了按需加载,再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true //这里一定要写true,css和less都不行哦
}),
addLessLoader({
javascriptEnabled: true,
//下面这行很特殊,这里是更改主题的关键,这里我只更改了主色,当然还可以更改其他的,下面会详细写出。
modifyVars: { "@primary-color": "#f47983"}
})
)
备注
当然除了全局主色,还可以更改很多选项,这里都统一列出来:
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, .85); // 标题色
@text-color: rgba(0, 0, 0, .65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15); // 浮层阴影