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.然后在项目根目录创建一个config-overrides.js 用于修改默认配置。
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.创建 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"
}
}
