webpack css模块化与antd的问题

webpack对css模块化处理的时候，config文件是这样写的

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


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 } } ] }


options:{modules:true}

有这行代码时，能实现css的模块化，避免类名全局污染，但是与此同时无法实现antd的按需加载。

解决方法是：对自己的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'}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容