项目中将sass更换成less（TypeError: this.getOptions is not a function已解决）

在更换之前，首先了解sass与less在用法上的区别有哪些（这里简单提几个）：

1. 变量区别：Less中用@，Sass用$
2. sass支持条件语句，可以使用if{}else{}、for循环等，而less不支持
3. 在定义变量时候，如果要将此变量作为类名使用，less中类名变量的值是没有引号的，而sass有
4. sass中如果变量需要在字符串中嵌套，则需要使用#加大括号包裹，less中是变量名使用大括号包裹

less定义变量（作为类名使用）：
@theme-name：dark;
.theme-@{theme-name}{
...
}

sass定义变量（作为类名使用）：
$theme-name:'dark';
.theme-#{$theme-name}{
...
}

字符串嵌套变量sass举例：
border-#{$right}:1px solid red
字符串嵌套变量less举例：
border-@{right}:1px solid red

---

第一步：卸载sass相关依赖包并安装less依赖包 

npm uninstall node-sass
npm install less less-loader

 第二步：sass文件替换成less

将 lang="scss" 替换成 lang="less",对照上述区别进行更改。

---

过程中遇到的报错：

将项目中的sass替换成less后，启动项目报错：

ERROR Failed to compile with 1 error 10:52:13

error in ./src/App.vue?vue&type=style&index=0&id=35fe2bd4&prod&lang=less

TypeError: this.getOptions is not a function

解决：这个错误是由于less-loader版本不兼容导致的，直接npm install [email protected] 重新启动项目就可以了

node版本16.19.0

less版本: 4.2.0

less-loader版本：5.0.0

如果还是报错，试试把node_modules和package-lock.json文件删掉再重新下载npm i 或npm i -f