在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'
               ),
            },
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容