在网上看了很多配置,终于发现create-react-app2.0之后可以不用eject就可以使用css模块特性,所以less可以按照css的配置1.css模块的使用是为了将CSS文件命名为[文件名]。来自'./index.module.css'的module.cssimport样式;2.配置less暴露webpack配置文件cnpmrunejectinstalllessless-loader依赖npminstalllessless-loader--save-dev修改webpack.config.js文件配置,一共修改三处:添加定义变量```constcssRegex=/\.css$/;constcssModuleRegex=/\.module\.css$/;constsassRegex=/\.(scss|sass)$/;constsassModuleRegex=/\.module\.(scss|sass)$/;constlessRegex=/\.less$/;constlessModuleRegex=/\.module\.less$/;```第二处:仿css配置less{test:cssRegex,exclude:cssModuleRegex,use:getStyleLoaders({importLoaders:1,sourceMap:isEnvProduction&&shouldUseSourceMap,}),//不要考虑CSS导入死代码,即使//containing包装声称没有副作用。//当webpack为这个添加警告或错误时移除这个。//请参阅https://github.com/webpack/webpack/issues/6571sideEffects:true,},//添加对CSS模块的支持(https://github.com/css-modules/css-modules)//使用扩展.module.css{test:cssModuleRegex,use:getStyleLoaders({importLoaders:1,sourceMap:isEnvProduction&&shouldUseSourceMap,modules:true,getLocalIdent:getCSSModuleLocalIdent,}),},//选择支持SASS(使用.scss或.sass扩展)。//默认情况下,我们支持扩展名为.module.scss或.module.sass的SASS模块{test:lessRegex,exclude:lessModuleRegex,use:getStyleLoaders({importLoaders:1,sourceMap:isEnvProduction&&shouldUseSourceMap,}),//不要考虑CSS导入死代码,即使//包含包声称没有副作用。//当webpack为这个添加警告或错误时移除这个。//请参阅https://github.com/webpack/webpack/issues/6571sideEffects:true,},//添加对CSS模块的支持(https://github.com/css-modules/css-modules)//使用扩展.module.css{test:lessModuleRegex,use:getStyleLoaders({importLoaders:1,sourceMap:isEnvProduction&&shouldUseSourceMap,modules:true,getLocalIdent:getCSSModuleLocalIdent,}),},第三处:修改getCSSModuleLocalIdent函数内部,添加less3测试是否安装成功,创建一个以module.less结尾的less文件importlesstoindeximportstylesfrom'./my.module.less'render(){console.log(styles.text)return(
