项目中将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