原文网址：Vue--解决Scss报错：Syntax Error: TypeError: this.getOptions is not a function_IT利刃出鞘的博客-CSDN博客

简介

        本文介绍Vue集成scss时的报错的解决方法。

        报错信息为：Syntax Error: TypeError: this.getOptions is not a function

问题复现

创建Vue项目并整合Scss的过程见：Vue--整合Scss--使用/实例_IT利刃出鞘的博客-CSDN博客

创建完后各个版本为：

• node.js：v14.15.3
• node-sass：7.0.1
• sass-loader：13.0.2

node.js版本查看方法

node -v

结果：

node-sass版本查看方法

法1：看package.json

法2：npm -list --depth=0

sass-loader版本查看方法

与node-sass的查看方法一样。

原因分析

原因概述

        sass-loader的版本太高了，不兼容 getOptions 函数方法，所以需要对 sass-loader 进行降级处理。

node 版本和 node-sass 版本对应关系

官网：GitHub - sass/node-sass: Node.js bindings to libsass

node版本和node-sass版本也不符合要求，我的node版本是14，所以node-sass需要低于5.0。

解决方案

需要做到以下版本都进行匹配：

1. node与node-sass
2. node-sass与sass-loade

修改版本的方法

node-sass

卸载现有版本

npm uninstall -D node-sass

安装指定版本

npm install -D node-sass@4.14.1

sass-loader

卸载现有版本

npm uninstall -D sass-loader

安装指定版本

npm install -D sass-loader@7.3.1

正确的版本组合

经不断尝试，正确的组合有：

• node-sass 6.0.1 , sass-loader 10.0.1
• node-sass 4.14.1, sass-loader 7.3.1
• node-sass 4.7.2 , sass-loader 7.0.3
• node-sass 4.3.0 , sass-loader 4.1.1