vue中webpack和less填坑：项目运行起来报错TypeError: this.getOptions is not a function

好久没怎么用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.组件中使用时，如果你写了less语法的样式，切记：给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原地满血复活！