using less-loader in webpack - Stack Overflow

node.js - How to fix a broken vuejs project after adding "less ... Home Public Questions Tags Users Companies Collectives ExploreCollectives Teams StackOverflowforTeams –Startcollaboratingandsharingorganizationalknowledge. CreateafreeTeam WhyTeams? Teams CreatefreeTeam Collectives™onStackOverflow Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost. Learnmore Teams Q&Aforwork Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch. Learnmore usingless-loaderinwebpack AskQuestion Asked 4years,1monthago Modified 1year,3monthsago Viewed 19ktimes 2 Iamcreatingabundle.jsfilewithwebpack.IhavedecidedIwanttostartusingLESSaswellandIhavetriedtoaddtheless-loaderaspertheinstructions: https://github.com/webpack-contrib/less-loader Iran: npm-installless-loader--save-dev ThenIupdatedthewebpack.config.jstoincludetherules: module.exports={ entry:"./src/entry.js", output:{ path:__dirname, filename:"./bundle.js", publicPath:"/" }, module:{ //********BELOWISTHERULESUADDED*************/ rules:[{ test:/\.less$/, use:[{ loader:'style-loader'//createsstylenodesfromJSstrings },{ loader:'css-loader'//translatesCSSintoCommonJS },{ loader:'less-loader'//compilesLesstoCSS }] }], //********ABOVEISTHERULESUADDED*************/ rules:[ { test:/\.js$/, loader:'babel-loader', query:{ presets:['es2015'] } } ], rules:[ { test:/\.css$/, use:[ {loader:"style-loader"}, {loader:"css-loader"} ] }, { test:/\.(html)$/, use:{ loader:'html-loader', options:{ attrs:[':data-src'] } } } ] }, devServer:{ stats:'errors-only' }, stats:{ colors:true }, devtool:'source-map' }; ThenIaddedalessfileandrequireditlikeso: require("./Bootstrap/bootstrap-iso.less"); thelessfileisjustawrapperforbootstrap(Ihavealsotriedsimpliercss) #entry{ @import(less)'./css/bootstrap.css'; } ButIcontinuetogetthefollowingerror: ERRORin./src/Bootstrap/bootstrap-iso.less Moduleparsefailed:Unexpectedcharacter'#'(1:0) Youmayneedanappropriateloadertohandlethisfiletype. |#entry{ |@import(less)'./css/bootstrap.css'; |} @./src/entry.js13:0-41 itseemsthattheloaderisnotloadedproperly? webpacklessless-loader Share Follow askedMay12,2018at5:08 MichaelMichael 7,5771717goldbadges5656silverbadges106106bronzebadges Addacomment  |  1Answer 1 Sortedby: Resettodefault Highestscore(default) Trending(recentvotescountmore) Datemodified(newestfirst) Datecreated(oldestfirst) 6 Itwasmymistakes,Ishouldnothavehadmultiplerulesproperties..seeworkingwebpack.config.jssnippet: module:{ rules:[{ test:/\.(less)$/, use:[{ loader:'style-loader'//createsstylenodesfromJSstrings },{ loader:'css-loader'//translatesCSSintoCommonJS },{ loader:'less-loader'//compilesLesstoCSS }] }, { test:/\.js$/, loader:'babel-loader', query:{ presets:['es2015'] } }, { test:/\.css$/, use:[ {loader:"style-loader"}, {loader:"css-loader"} ] }, { test:/\.(html)$/, use:{ loader:'html-loader', options:{ attrs:[':data-src'] } } } ] } Share Follow editedMar2,2021at10:21 FarrukhNormuradov 93211goldbadge99silverbadges2929bronzebadges answeredMay12,2018at5:36 MichaelMichael 7,5771717goldbadges5656silverbadges106106bronzebadges Addacomment  |  YourAnswer ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers. Draftsaved Draftdiscarded Signuporlogin SignupusingGoogle SignupusingFacebook SignupusingEmailandPassword Submit Postasaguest Name Email Required,butnevershown PostYourAnswer Discard Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy Nottheansweryou'relookingfor?Browseotherquestionstaggedwebpacklessless-loaderoraskyourownquestion. TheOverflowBlog GitHubCopilotishere.Butwhat’stheprice?(Ep.457) Skillinguptoarchitect:Whatyouneedtolandhigh-payingITroles FeaturedonMeta Testingnewtrafficmanagementtool Duplicatedvotesarebeingcleanedup Trending:Anewanswersortingoption AskWizardTestResultsandNextSteps Shouldweburninatethe[hyphen]tag? Updatedbuttonstylingforvotearrows:currentlyinA/Btesting Related 152 Invalidconfigurationobject.WebpackhasbeeninitialisedusingaconfigurationobjectthatdoesnotmatchtheAPIschema 2 HowtofixHTMLfilecommentsnotbeingignoredbyWebpackDevServer? 2 Webpackproductionbuildfails:"Can'tresolve'aws-sdk'" 1 Integratewebpackwithbootstrapandless-loader 3 Webpack-differentfontpathforbuildandproductioncssintheless-loader HotNetworkQuestions Whatisthefunctionorbenefitofincludingjugglingmechanicsinafightinggame? Whatactuallyistheideabehindthecondensedmathematics? npointsin2dplaneandamethod(a,b)thatreturnsallpointscloserto0than(a,b) Howtoreplaceawoodenanchorinandecades-oldconcretelintel HowcanItellmybossthatmyproductivityislowduetoaconflictwithacoworker,withoutblamingthecoworker? Canthesefancifullizardfolkshouldersproperlyfittogether? CanIskipthefirstlegofajourney,onatwowayflight,onalowcostcarrier? Canwequantifythepitchofasoundthatisamixtureofmanyfrequencies? IsitshuffledFizzBuzz? Otherthantherestareasforthecrew-whatelseisinthe'attic'ofanaeroplane? BalancingCommandwhiletakingintoaccountlanguages Whywouldanationrequireimmigrantstofulfiladecadeofmilitaryservicetogaincitizenship? Woulditbefrowneduponforapersontoholdtwofulltimeonlineteachingpositions? Doingalittletrollingwiththemicrowavetimer Turntwocubesintoone! IhavewrittenonemathematicalpaperwhichIwanttopublish,doIneedtogiveprofessorco-authorship? Quadraticlowerbound Whensubmittingapapertoajournal,whatisconsideredanoriginalfigure? Howtoplotthedatawhereyisafunction? Storyaboutamotherandhersononagenerationshipbecomingimmortal HowdoItellmyDMthatdicedon’tneedtodictatethestory? WhendoIswitchfrom"DearDr.X"to"DearFirstname"whenexchangingemailswithaprofessorthatIneverseenbefore? Whenwouldonecarryaswordonashoulderwithgripupwards? IsFrederic21or22in"PiratesofPenzance"? morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings