在react脚手架配置antd按需引入和自定义主题
发表于:
2021-06-25 21:31
分类:
js
此方法在AntDesign4.x测试,可能不适用于3.x版本
此方法在AntDesign4.x测试,可能不适用于3.x版本
安装craco-antd 插件
yarn add craco-antd
安装babel相关插件
yarn add babel-plugin-import @babel/plugin- proposal-decorators
由于antd组件库是用less写的,自定义主题需要覆盖less的变量,所以还需要安装less-loader和css-loader
yarn add less-loader css-loader
在项目根目录创建craco.config.js
const CracoAntDesignPlugin = require('craco-antd');
module.exports = {
babel:{
plugins:[
['@babel/plugin-proposal-decorators',{legacy:true}],
]
},
plugins:[
{
plugin:CracoAntDesignPlugin,
options:{
lessLoaderOptions:{
lessOptions:{
modifyVars:{
},
javascriptEnabled:true
//sourceMap:false
}
},
cssLoaderOptions:{
modules:{
localIdentName:'[local]_[hash:base64:5]',
mode:(resourcePath)=>{
if(/pure\.(less|css)$/i.test(resourcePath)){
return 'pure';
}
if(/(global)\.(less|css)$/i.test(resourcePath)){
return 'global';
}
if(/antd/i.test(resourcePath)){
return 'global';
}
return 'local';
}
}
},
babelPluginImportOptions:{
libraryName:'antd',
libraryDirectory:'es',
style:true
}
}
},
]
}