配置antd主题色过程中踩了不少坑。记录以下遇到的一些问题:
本实例解决方案是通过craco+craco.config.js+craco.less来实现的。
基本步骤:
(1)安装@craco/craco和craco-less
(2)修改package.json的script配置为
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
(3)在src目录下的index.js文件中引入
import “antd/dist/antd.less”
(4)在根目录下新建一个craco.config.js文件
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#ff8c00' },
javascriptEnabled: true,
},
},
},
},
],
};
以下是几个踩坑的点:
1 修改package.json的script配置和新建craco.config.js以后,重新启动会报错:
Erroe:Cannot find module 'react-scripts/package.json'
解决方法:npm i react-scripts
2 在index.js中引入“antd/dist/antd.less"会报错 Cannot find module"~antd/dist/antd.less".但是如你改成“antd/dist/antd.css”则正常显示的问题
解决方法:重新启动。清理缓存再启动下就可以了
方法二:更改create-react-app配置实现:
特别注意less/less-loader版本问题,这里坑很多:经过多方测试,
"less": "4.1.1",
"less-loader": "^5.0.0",可以正常运行。
在script文件夹的webpack.config.js中对postcss-loader做如下更改:
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
if (preProcessor === "less-loader") {
loaders.push({
loader:require.resolve(preProcessor),
options:{
sourceMap: isEnvProduction&&shouldUseSourceMap,
modifyVars:{
'primary-color': '#ff8c00',
"ant-btn-primary":"#ff8c00"
},
javascriptEnabled:true
}
})
}else{
loaders.push(
{
loader:require.resolve("resolve-url-loader"),
options:{
sourceMap: isEnvProduction && shouldUseSourceMap,
}
},
{
loader:require.resolve(preProcessor),
options:{
sourceMap:true
}
},
)
}
}
return loaders;
};
在if (preProcessor) 中添加对less-loader的判断,单独处理,添加modifyVars即可实现主题色更改