webpack css模块化与antd的问题

Question

在用react+antd做自己的小demo的时候遇见的问题，之前都没注意到过。
就是我在用webpack对css进行模块化处理的时候，config文件是这样写的

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

这样可以避免相同类名的全局污染，比如

入口文件root.js

footer.js组件

header.js组件

css内容如下

页面能正常显示，不存在全局污染

---

然后这次我用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

这次惊奇地发现生成的页面不能正确导入antd的样式
效果图如下

这问题让我百思不得其解，我也不知道自己倒腾了多久，不过幸运的是还真让自己倒腾出原因所在了，原因就在于config文件中的这个地方，将这行代码删掉，能正确实现antd的按需加载

现在效果图如下

所以有

`
options:{
  modules:true
}`

这行代码，我能实现css的模块化，避免类名全局污染，但是与此同时无法实现antd的按需加载。所以请问如何才能消除这个矛盾呢？
（第一次提问，问得有点啰嗦，还请谅解）

Answer 1

我也遇到了这个问题，暂时的解决办法就是 对自己的css代码开启css模块化 对antd关闭css模块化。

  {
    test: /\.css$/,
    exclude: /(node_modules)/,
    loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]'
  },
  {
    test: /\.css$/,
    exclude: /(src)/,
    loader: 'style-loader!css-loader'
  }