配置antd、less、路径别名

第一步

// 安装一下需要的插
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, addWebpackAlias } = require('customize-cra');
const path = require('path');
function resolve(dir) {return path.join(__dirname, '.', dir)
}module.exports = override(// antd按需加载，不需要每个页面都引入“antd/dist/antd.css”了fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: true  //这里一定要写true，css和less都不行}),// 配置路径别名addWebpackAlias({@: resolve("src")}),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);  // 浮层阴影
复制代码

配置proxy

1. 安装 http-proxy-middleware

yarn add http-proxy-middleware --dev
复制代码

2. 在src目录下新建 setupProxy.js并且写入:

const proxy = require('http-proxy-middleware');
module.exports = function (app) {app.use(proxy('aabbbcccc.json',{target: 'https://www.baidu.com',changeOrigin: true}));
复制代码

3. 重启服务试一试