在react中使用less

筆者使用的react版本是16.12.0的,想在react中使用less

第一步 安裝less less-loader

yarn less less-loader

第二步 暴露webpack的配置

yarn eject

第三步 修改webpack.config.js

然后進(jìn)入config目錄打開webpack.config.js

添加lessRegex lessModuleRegex

然后在getStyleLoaders函數(shù)中添加lessOptions,和相應(yīng)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'
               ),
            },
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容