node、node-sass、sass-loader的版本兼容问题
目录
-
- 使用scss报错
-
- 当前node-sass、sass-loader版本
- 测试
-
- 步骤一
- 步骤二
- 解决方案
-
- 解决node-sass问题
- node和node-sass版本关系
这篇文章主要写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 [email protected]
"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 [email protected]
？？？为什么我的不行，报错了！！！
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 [email protected]
运行结果,提示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 [email protected]
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",
未完待续。。。