React項目中使用less
1.安裝less绒障,less-loader兩個包
2.yarn eject暴露出webpack配置(我這里使用的yarn使用npm的命令是:npm run eject)
3.修改webpack配置,我使用的react版本是16.12.0
修改這個文件糙臼,這里有三種修改方式:
一恩商、在webpack配置中你會發(fā)現(xiàn)配置了sass,把所有的sass配置換成less的配置
? ? 缺點是無法再使用sass
二揽乱、同樣的在webpack同樣的地方凰棉,定義sass正則的地方陌粹,同樣定義一份less的正則
然后,搜索在配置文件中搜索sassRegex和sassModuleReges或舞,將這兩個配置復制一份蒙幻,把sass改成less邮破,把sass-loader改成less-loader
? ? 缺點是代碼冗余决乎,在實際開發(fā)中我們不一定兩者都要使用,二選一
三蚌斩、找到cssRegex定義的地方范嘱,校對css的正則修改為/\.(css|less)$/,然后找到getStyleLoaders 叠聋,往下找loader的依賴受裹,先找style-loader,再往下找到css-loader,在跟css-loader同級的地方厦章,添加一個less-loader的依賴關系
4.這時重啟項目袜啃,一定要重啟,一定要重啟晰韵,一定要重啟熟妓,就能看到less生效了
如果項目在重啟過程中有報錯缺少包,缺少什么安裝什么包就可以了