1.npm install react-app-rewired customize-cra --save-dev
/* 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",
}
2.然后在項(xiàng)目根目錄創(chuàng)建一個(gè)config-overrides.js 用于修改默認(rèn)配置错敢。
const?{?override,?fixBabelImports,?addLessLoader?}?=?require('customize-cra');
const?theme?=?require('./your-theme-file');
module.exports?=?override(
????addLessLoader({
??????lessOptions:{
????????javascriptEnabled:true?,
????????modifyVars:theme,
????????cssModules:?{
??????????localIdentName:?"[local]--[hash:base64:5]",?//?if?you?use?CSS?Modules,?and?custom?`localIdentName`,?default?is?'[local]--[hash:base64:5]'.
????????},
????????sourceMap:?true,
??????},
????}),
????fixBabelImports('import',?{
??????libraryName:?'antd-mobile',
??????libraryDirectory:?'es',
??????style:?true,
????}),
);
3.創(chuàng)建 your-theme-file.json ?編寫替換 antd屬性
{
????"@brand-primary":?"#d7000f"
}
4.package.json
{
??"name":?"web-app",
??"version":?"0.1.0",
??"private":?true,
??"dependencies":?{
????"@testing-library/jest-dom":?"^4.2.4",
????"@testing-library/react":?"^9.5.0",
????"@testing-library/user-event":?"^7.2.1",
????"core-js":?"^3.6.5",
????"react":?"^16.13.1",
????"react-app-polyfill":?"^1.0.6",
????"react-dom":?"^16.13.1",
????"react-scripts":?"3.4.2"
??},
??"scripts":?{
????"start":?"react-app-rewired?start",
????"build":?"react-app-rewired?build",
????"test":?"react-app-rewired?test",
????"eject":?"react-scripts?eject"
??},
??"eslintConfig":?{
????"extends":?"react-app"
??},
??"browserslist":?{
????"production":?[
??????">0.2%",
??????"not?dead",
??????"not?op_mini?all",
??????"ie?>?9"
????],
????"development":?[
??????"last?1?chrome?version",
??????"last?1?firefox?version",
??????"last?1?safari?version",
??????"ie?>?9"
????]
??},
??"devDependencies":?{
????"babel-plugin-import":?"^1.13.0",
????"customize-cra":?"^1.0.0",
????"less":?"^3.12.2",
????"less-loader":?"^6.2.0",
????"react-app-rewired":?"^2.1.6"
??}
}
