版本
“less”: “^4.0.0”,
“less-loader”: “^7.2.0”,
“react”: “^17.0.1”,
“babel-plugin-import”: “^1.13.3”
若是不需要修改别的仅仅支持less编译,不需要暴露配置
- 安装依赖
yarn add react-app-rewired babel-plugin-import less less-loader style-loader css-loader customize-cra
- 配置启动项
- 创建 config-overrides.js 文件,跟package.json同级目录
const {
override,
fixBabelImports,
addLessLoader,
addWebpackAlias} = require('customize-cra');
const path = require("path");
module.exports = function override(config, env) {
return config;
};
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
style: "css"
}),
//使用less-loader对源码重的less的变量进行设置antd自定义主题
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {
"@primary-color": "#1890ff",
}
}
}),
//增加路径别名的处理
addWebpackAlias({
'@': path.resolve('./src')
})
);
通过以上步骤就可以编译运行less文件了
以下是仅支持less后缀,但并不能编译通过
- 暴露webpack配置
yarn eject
如果报错,先用git提交一下
git add .
git commit -m “init”
- 支持less
对 webpack.config.js 进行修改
修改正则匹配的语法,蓝框中
- antd按需加载组件
安装 babel-plugin-import
yarn add babel-plugin-import
对 package.json 进行修改
添加plugins的语句
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]