不eject情况下配置antd按需加载
1.安装 react-app-rewired
yarn add react-app-rewired
2. 项目根目录下新建 config-overrides.js 文件
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
3. 修改package.json文件中的start、build、test 命令
/* 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 --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
4. 安装以下组件
yarn add less less-loader customize-cra
5. 扩展配置选项
修改config-overrides.js文件
const {
override,
fixBabelImports,
addLessLoader
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "lib", style: true // change importing css to less
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
"@font-size-base": "12px",
"@text-color": 'rgba(0, 0, 0, .85)'
}
})
)
6. 启动开发服务
yarn start