irpas技术客

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

大大的周 6009

目录 使用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 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版本

NodeJSSupported node-sass versionNode ModuleNode 155.0+88Node 144.14+83Node 134.13+, <5.079Node 124.12+72Node 114.10+, <5.067Node 104.9+64Node 84.5.3+, <5.057Node <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",

未完待续。。。


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #纳尼最新版的既然不兼容 #来看看错误提示 #error #failed