好久沒怎么用less了，今天在vue項目中突然想用less來改輪播圖的樣式，做一個穿透。折騰幾何，昏昏欲死，歷經各番查閱，終於解決，此時心中飛過無數省略號！
下面細說一下經歷和填坑記錄：
我使用的vue版本是2.5.2，webpack版本是3.6.0，注意版本！之前本人嘗試升級過webpack4.0配合使用sass，因為使用sass必須安裝node-sass和sass-loader，使用中發現webpack4.0對於sass存在兼容性問題，一般解決問題的方案是把node-sass降級處理。
此外，也發生過extract-text-webpack-plugin還不能支持webpack4.0.0以上的版本的情況，所以自行升級webpack4.0使用，問題還是比較多的。對於webpack大家要注意全局安裝和本地安裝的版本的一致性。
好了，話歸正狀，此處討論less填坑。vue中使用less的流程：
安裝less和less-loader => webapck中配置module模塊下的rules數組項，新增對less文件的解析規則 => 組件中使用<style lang="less"></style>即可
注意注意，這三步過程中，你可能都會犯低級錯誤：
1.安裝時，如果采用less和less-loader同時安裝，請按rules里書寫的相反順序來安裝，否則會報錯！即npm i less less-loader -S為正解！npm i less-loader less-S為誤操作！注意最好帶上-S或-D，不帶的話某些情況下會造成模塊包依賴的無故丟失的未知錯誤！ ==>解決方法一般是把項目依賴的包刪了，重新yarn或者npm i 一下！
2.rules配置規則：瀏覽器是從你書寫的末項loader到你書寫的首項loader來解析的！rules是一個數組，數組成員為對象，每個對象里定義test的正則和使用的loader，有兩種寫法：
{test:/\.css/,use:['style-loader','css-loader',less-loader']} 或者 {test:/\.css/,loader:'style-loader!css-loader!less-loader'}
注意loader的順序不能亂，從右往左解析，瀏覽器是先less-loader解析，不能解析再css-loader解，css-loader不行再style-loader出馬，所以順序亂了運行起來必然報錯！
3.組件中使用時，切記：給style標簽加上lang="less"屬性，否則運行時，還是會報錯！如果樣式只作用於當前組件，不讓它影響其他組件，就再在style標簽上加上scoped屬性！
以上三步我都無誤，但是運行就報錯了，因為腳手架自動安裝的less-loader版本是8.x的版本了，所以一運行起來就又報錯：
TypeError: this.getOptions is not a function xxxxxxxxx……(此處省略老媽媽的裹腳——又臭又長)
解決方案：把less-loader卸載后降級換成5.0的版本！注意less是生產環境使用，線上環境不需要，故用--save-dev，具體操作如下：
npm uninstall less-loader ，再 npm i less-loader@5.0 -D。
此外，swiper插件使用過程中發現6.0以上版本國內還沒有成熟文檔指引，所以最好還是使用5.x的版本，推薦安裝5.4.5的版本，即npm i swiper@5.4.5 -S即可。
至此，填坑完畢！npm run dev原地滿血復活！