Less-loader - Webpack - W3cubDocs

A Less loader for webpack. Compiles Less to CSS. Requirements. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0. Getting Started. less-loader [![npm][npm]][npm-url][![node][node]][node-url][![deps][deps]][deps-url][![tests][tests]][tests-url][![chat][chat]][chat-url]ALessloaderforwebpack.CompilesLesstoCSS.ThismodulerequiresaminimumofNodev6.9.0andWebpackv4.0.0.Tobegin,you'llneedtoinstallless-loader:$npminstallless-loader--save-dev Thenmodifyyourwebpack.config.js://webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.less$/, loader:'less-loader'//compilesLesstoCSS }] } }; Andrunwebpackviayourpreferredmethod.Theless-loaderrequireslessaspeerDependency.Thusyouareabletocontroltheversionsaccurately.Chaintheless-loaderwiththecss-loaderandthestyle-loadertoimmediatelyapplyallstylestotheDOM.//webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader'//createsstylenodesfromJSstrings },{ loader:'css-loader'//translatesCSSintoCommonJS },{ loader:'less-loader'//compilesLesstoCSS }] }] } }; YoucanpassanyLessspecificoptionstotheless-loadervialoaderoptions.SeetheLessdocumentationforallavailableoptionsindash-case.Sincewe'repassingtheseoptionstoLessprogrammatically,youneedtopassthemincamelCasehere://webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader' },{ loader:'css-loader' },{ loader:'less-loader',options:{ strictMath:true, noIeCompat:true } }] }] } }; Unfortunately,Lessdoesn'tmapalloptions1-by-1tocamelCase.Whenindoubt,checktheirexecutableandsearchforthedash-caseoption.Usually,it'srecommendedtoextractthestylesheetsintoadedicatedfileinproductionusingtheMiniCssExtractPlugin.ThiswayyourstylesarenotdependentonJavaScript.Startingwithless-loader4,youcannowchoosebetweenLess'builtinresolverandwebpack'sresolver.Bydefault,webpack'sresolverisused.webpackprovidesanadvancedmechanismtoresolvefiles.Theless-loaderappliesaLesspluginthatpassesallqueriestothewebpackresolver.ThusyoucanimportyourLessmodulesfromnode_modules.Justprependthemwitha~whichtellswebpacktolookupthemodules.@import'~bootstrap/less/bootstrap'; It'simportanttoonlyprependitwith~,because~/resolvestothehome-directory.webpackneedstodistinguishbetweenbootstrapand~bootstrap,becauseCSSandLessfileshavenospecialsyntaxforimportingrelativefiles.Writing@import"file"isthesameas@import"./file";Usingwebpack'sresolver,youcanimportanyfiletype.YoujustneedaloaderthatexportsvalidLesscode.Often,youwillalsowanttosettheissuerconditiontoensurethatthisruleisonlyappliedonimportsoriginatingfromLessfiles://webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.js$/, issuer:/\.less$/, use:[{ loader:'js-to-less-loader' }] }] } }; Ifyouspecifythepathsoption,theless-loaderwillnotusewebpack'sresolver.Modules,thatcan'tberesolvedinthelocalfolder,willbesearchedinthegivenpaths.ThisisLess'defaultbehavior.pathsshouldbeanarraywithabsolutepaths://webpack.config.js module.exports={ ... module:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader' },{ loader:'css-loader' },{ loader:'less-loader',options:{ paths:[ path.resolve(__dirname,'node_modules') ] } }] }] } }; Inthiscase,allwebpackfeatureslikeimportingnon-Lessfilesoraliasingwon'tworkofcourse.Inordertouseplugins,simplysetthepluginsoptionlikethis://webpack.config.js constCleanCSSPlugin=require('less-plugin-clean-css'); module.exports={ ... { loader:'less-loader',options:{ plugins:[ newCleanCSSPlugin({advanced:true}) ] } }] ... }; BundlingCSSwithwebpackhassomeniceadvantageslikereferencingimagesandfontswithhashedurlsorhotmodulereplacementindevelopment.Inproduction,ontheotherhand,it'snotagoodideatoapplyyourstylesheetsdependingonJSexecution.RenderingmaybedelayedorevenaFOUCmightbevisible.Thusit'softenstillbettertohavethemasseparatefilesinyourfinalproductionbuild.Therearetwopossibilitiestoextractastylesheetfromthebundle: extract-loader(simpler,butspecializedonthecss-loader'soutput) MiniCssExtractPlugin(morecomplex,butworksinalluse-cases)ToenableCSSsourcemaps,you'llneedtopassthesourceMapoptiontotheless-loaderandthecss-loader.Yourwebpack.config.jsshouldlooklikethis:module.exports={ ... module:{ rules:[{ test:/\.less$/, use:[{ loader:'style-loader' },{ loader:'css-loader',options:{ sourceMap:true } },{ loader:'less-loader',options:{ sourceMap:true } }] }] } }; AlsocheckoutthesourceMapsexample.IfyouwanttoedittheoriginalLessfilesinsideChrome,there'sagoodblogpost.TheblogpostisaboutSassbutitalsoworksforLess.ThereisaknownproblemwithLessandCSSmodulesregardingrelativefilepathsinurl(...)statements.Seethisissueforanexplanation.Pleasetakeamomenttoreadourcontributingguidelinesifyouhaven'tyetdoneso. ©JSFoundationandothercontributorsLicensedundertheCreativeCommonsAttributionLicense4.0. https://webpack.js.org/loaders/less-loader