仙娥小站

在react脚手架配置antd按需引入和自定义主题

发表于: 2021-06-25 21:31 分类: js

此方法在AntDesign4.x测试,可能不适用于3.x版本

"在react脚手架配置antd按需引入和自定义主题"

此方法在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
                }
            }
        },
    ]
}