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