antd和css Modules同时使用，在webpack中同时配置antd和css Modules

我们开发react的时候通常会使用到的css Modules，但是我们在如果全局配置了css Modules了以后，antd的css代码也会被改变，然后组件就会出错。

解决方式：配置两次css匹配项，因为我们的antd文件资源在node_modules，而我们的普通文件不在node_module中。所以我们在匹配文件的时候，如果是antd的文件就是用include:/node_modules/然后配置css 中的modules:false，普通的匹配则是exclude:/node_modules/，然后配置css 中的modules:true。

当然首先是babelrc中的antd中的配置

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins":[[
        "import",{
            "libraryName":"antd",
            "libraryDirectory":"es",
            "style":"css"
        }],
        ["@babel/plugin-proposal-class-properties"]
    ]
}

然后是配置关于antd中不适用css moudles 的配置：

module.exports={
    module:{
        rules:[
             {
                test:/\.css$/,
                include:/node_modules/,
                use:[
                    'style-loader',
                    {
                        loader:'css-loader',
                        options:{
                            modules:false
                        }
                    }
                ]
            }
        ]
    }
}

再是配置你自己写的css样式配置使用css modules：

module.exports={
    module:{
        rules:[
             {
                test:/\.css$/,
                exclude:/node_modules/,
                use:[
                    'style-loader',
                    {
                        loader:'css-loader',
                        options:{
                            modules:true
                        }
                    }
                ]
            }
        ]
    }
}

当然你可以使用sass或者less，然后单独配置就好了