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