项目中将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 less-loader@5.0.0 重新启动项目就可以了

node版本16.19.0

less版本: 4.2.0

less-loader版本:5.0.0

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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui