Syntax Error: TypeError: this.getOptions is not a function

Posted 2022-09-21 凯小默

问题

我使用的 node 版本是 12.13.0

vue 项目里使用了 node-sass，sass-loader，版本如下

"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",

运行报错

解决

目前我的解决方式降低两个依赖的版本：

"node-sass": "^5.0.0",
"sass-loader": "^10.0.5",

安装相应版本：

npm i node-sass@5.0.0 sass-loader@10.0.5 -D

安装完成运行之后，就没有报错了

第一个需要注意的就是 node 跟 node-sass 的版本

具体可以参考：https://github.com/sass/node-sass

以下是 node-sass 支持的最低和最高版本的快速指南：

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+	83
Node 13	4.13+, <5.0	79
Node 12	4.12+, <8.0	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

第二个就是 sass-loader 跟 node-sass 版本

具体可以参考：https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md

目前我测试的 sass-loader 版本高于 11.0.0 会报错，所以选择了这个版本。

另外官网也建议转移到 dart sass：

警告：不推荐使用 LibSass 和 Node Sass。 虽然他们将继续无限期地接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。 仍在使用它的项目应该转移到 Dart Sass。