参考资料:
customize-cra
react-app-rewired
babel-plugin-import
npx create-react-app override-cra --use-yarn
安装依赖:
cd override-cra
yarn add antd
yarn add customize-cra react-app-rewired babel-plugin-import less less-loader -D
package.json 同级目录下新建 config-overrides.js
文件
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
},
})
);
修改 package.json 脚本 scripts:(react-scripts -> react-app-rewired)
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
},
Q&A:
报错: ./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/antd/es/button/style/index.less)
TypeError: this.getOptions is not a function
原因:
less-loader 安装的版本过高
解决:
yarn remove less-loader
yarn add less-loader@5.0.0