antd按需引入 及 自定义类名隔离样式

按需引入

// 安装插件yarn add babel-plugin-import
module.exports = {
    // 这个配置是使用antd额按需加载
    "plugins":[ [ "import", { "libraryName": "antd",  // 这个"style": true默认是使用less,还可以改成"style": "css" "style": true } ] ] }

自定义类名

// webpack.config.js
{
    loader: 'less-loader', options: { lessOptions:{ javascriptEnabled: true, modifyVars: {  // 以下两个配置使用前提是必须在按需引入那里配置"style": true，否则不起作用，因为这里要是用less变量 // @primary-color是设置antd的主题色，默认是蓝色的 // @ant-prefix是自定义antd组件类名前缀的，需要配合<ConfigProvider prefixCls="ymx">使用 "@primary-color": "red", "@ant-prefix": "ymx", //只是改变打包css文件里面代码的前缀 }, } }, }

<ConfigProvider prefixCls="ymx"></ConfigProvider>

 Modal组件

Modal.warning({
    prefixCls: 'ymx-modal', //需要加入的属性
    title: '错误',
    content: "",
    onOk() {}
});

 notification组件

notification.error({
     placement: "bottomLeft",
     message: "xx",
     description: "xx",
     prefixCls: 'ymx-notification' //需要加入的属性

 }}

 

参考：https://blog.csdn.net/YMX2020/article/details/108607272