node、node-sass、sass-loader的版本兼容问题

这篇文章主要写node、node-sass、sass-loader三者引起的兼容问题。

使用scss报错

为什么要写这篇文章，安装最新版sass运行报错了。
纳尼，最新版的既然不兼容。

来看看错误提示

 ERROR  Failed to compile with 1 error                                                                                                 下午11:02:54

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

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


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true 4:14-450 14:3-18:5 15:22-458
 @ ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true
 @ ./src/components/ANew.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.10.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

网上找了很多资料都是说node-sass和sass-loader版本有问题

当前node-sass、sass-loader版本

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

网上的资料反正可以确定是这两个的版本问题，能找到解决方法，但是知其然而不知其所以然。

网上找到比较好的版本，但是这不是我想要的。

sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2

测试

步骤一

根据资料更新sass-loader版本

npm uninstall sass-loader
npm install sass-loader@7.3.1

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

运行结果

WARN A new version of sass-loader is available. Please upgrade for best experience.
Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

1个警告、一个错误

 INFO  Starting development server...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                 下午11:18:29

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true 4:14-450 14:3-18:5 15:22-458
 @ ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true
 @ ./src/components/ANew.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.10.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

步骤二

Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

根据提示把node-sass降到^4.0.0版本

npm uninstall node-sass
npm install node-sass@4.7.2

？？？为什么我的不行，报错了！！！
node-sass还安装失败这是为什么？？？

解决方案

本文需要的条件都出现了

node-sass安装报错
sass-loader降低版本，提示还有更新版。

解决node-sass问题

node-sass报错还是比较常见的
去了新公司，npm install运行node-sass报错。问了边上几个同事都说正常的，说是node的问题。试了根据要求安装了node12。

项目可以正常运行了，但是项目中会所谓一些奇怪的bug,为什么会这样。

这问题我就不解释了，如果有同学遇上了在问为什么。我直接入正题

node和node-sass版本关系

打了npm上node-sass找到node对应的node-sass版本

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

查看自己的node版本

node -v

v14.11.0

根据node版本安装对应的 node-sass版本

npm uninstall node-sass
npm install node-sass@4.14.1

运行结果,提示sass-loader有更新版本。

WARN A new version of sass-loader is available. Please upgrade for best experience.

 INFO  Starting development server...
 WARN  A new version of sass-loader is available. Please upgrade for best experience.
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2927ms  

安装sass-loader ^11.0以上最新版本

根据大版本安装，node-sass@4.. 支持sass-loader@10..

npm uninstall sass-loader
npm install sass-loader@10.1.1

 ERROR  Failed to compile with 1 error                                                                                                  上午7:36:22

 error  in ./src/components/ANew.vue?vue&type=style&index=0&id=039d1e2f&lang=scss&scoped=true

Syntax Error: Error: PostCSS received undefined instead of CSS string
    at runMicrotasks (<anonymous>)

"node-sass": "^4.14.1",
"sass-loader": "^10.1.1",

未完待续。。。