webpack css模塊化與antd的問題

在用react+antd做自己的小demo的時候遇見的問題，之前都沒注意到過。
就是我在用webpack對css進(jìn)行模塊化處理的時候，config文件是這樣寫的

        `
        {
            test:/\.css$/,
            use:[
                {
                    loader:"style-loader"
                },
                {
                    loader:"css-loader",
                    options:{
                        modules:true
                    }
                }
            ]
        }`
       

這樣可以避免相同類名的全局污染，比如

入口文件root.js

footer.js組件

header.js組件

css內(nèi)容如下

頁面能正常顯示，不存在全局污染

然后這次我用react+antd去配置自己的項目，config文件如下

{
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["env","react"],
                        plugins:[
                            ["import", { "libraryName": "antd", "style": "css" }]
                        ]
                    }
                }
            },
            {
                test:/\.css$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader",
                        options:{
                            modules:true
                        }
                    }
                ]
            }

入口文件root.js

這次驚奇地發(fā)現(xiàn)生成的頁面不能正確導(dǎo)入antd的樣式
效果圖如下

這問題讓我百思不得其解，我也不知道自己倒騰了多久，不過幸運的是還真讓自己倒騰出原因所在了，原因就在于config文件中的這個地方，將這行代碼刪掉，能正確實現(xiàn)antd的按需加載

現(xiàn)在效果圖如下

所以有

`
options:{
  modules:true
}`

這行代碼，我能實現(xiàn)css的模塊化，避免類名全局污染，但是與此同時無法實現(xiàn)antd的按需加載。所以請問如何才能消除這個矛盾呢？
（第一次提問，問得有點啰嗦，還請諒解）