在react中使用less

笔者使用的react版本是16.12.0的，想在react中使用less

第一步 安装less less-loader

yarn less less-loader

第二步 暴露webpack的配置

yarn eject

第三步 修改webpack.config.js

然后进入config目录打开webpack.config.js

添加lessRegex lessModuleRegex

然后在getStyleLoaders函数中添加lessOptions,和相应loader

{
             test: cssModuleRegex,
             use: getStyleLoaders({
                importLoaders: 1, 
                 sourceMap: isEnvProduction && shouldUseSourceMap, 
                 modules: {
                   getLocalIdent: getCSSModuleLocalIdent,
                }, 
               }),
             }, 
             {
              test: lessRegex, 
               exclude: lessModuleRegex, 
               use: getStyleLoaders( 
                {
                   importLoaders: 1, 
                   sourceMap: isEnvProduction && shouldUseSourceMap, 
                 }, 
                 'less-loader' 
               ), 
               sideEffects: true, 
             }, 
            {
              test: lessModuleRegex, 
              use: getStyleLoaders(
                 {
                   importLoaders: 1, 
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                   module: true,
                   getLocalIdent: getCSSModuleLocalIdent
                  },
                'less-loader'
               ),
            },
}