react项目中使用react-rewired配置基本的环境

1. 首先我们需要使用脚手架create-react-app my-app创建一个react项目，将src文件中的内容全部删除，新创建一个index.js和App.js页面，渲染基本的react页面
2. 使用npm安装react-app-rewired
   npm i react-app-rewired customize-cra -D
   3.在根目录下新建一个condfig-overrides.js文件

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

module.exports=override()

4.在package.json中修改启动方式

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

5.配置less
首先安装npm i less less-loader -D
安装成功后，在config.overrides.js中配置

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

module.exports=override(
    addLessLoader({
        javascriptEnabled:true
    })
)

6.在less使用的时候我们只需要在src中创建一个.less文件
例如：

@bgc:#F00;
body{
    background-color:@bgc;
}

写好样式在src的index.js中引入即可
import ‘./index.less’
如果生效就代表less配置成功了
7、安装antd
npm i antd -S
同时还要安装babel
npm i babel-plugin-import -D
8、在config.overrides.js中配置fixBabelImports

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

module.exports=override(
    addLessLoader({
        javascriptEnabled:true
    }),
    fixBabelImports('import',{
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    })
)

9.可以写个按钮测试一下antd
App.js

import{
    Button
} from 'antd'
export default class App extends Component {
  render() {
    return (
      <div>
        app<Button>antd</Button>
      </div>
    )
  }
}

有时候我们需要自定义样式，所以可以新建一个.js
这里面的内容都是ant中的定制主题

module.exports={
    '@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, 0.85)', // 标题色
    '@text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
    '@text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
    '@disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
    '@border-radius-base': '4px', // 组件/浮层圆角
    '@border-color-base': 'd9d9d9', // 边框色
    '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
}

写完之后，在config.overrides.js中引入
const modifyVars=require(’./lessVars’)

module.exports=override(
    addLessLoader({
        javascriptEnabled:true,
        modifyVars
    }),
    fixBabelImports('import',{
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    })
)