原文网址：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

NodeJSSupported node-sass versionNode Module
Node 177.0+102
Node 166.0+93
Node 155.0+, <7.088
Node 144.14+83
Node 134.13+, <5.079
Node 124.12+, <8.072
Node 114.10+, <5.067
Node 104.9+, <6.064
Node 84.5.3+, <5.057
Node <8<5.0<57

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

解决方案

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

  1. node与node-sass
  2. node-sass与sass-loader

修改版本的方法

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

# scss # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue