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