目录

这篇文章主要写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 Module
Node 209.0+115
Node 198.0+111
Node 188.0+108
Node 177.0+, <8.0102
Node 166.0+93
Node 155.0+88
Node 144.14+83
Node 134.13+, <5.079
Node 124.12+72
Node 114.10+, <5.067
Node 104.9+64
Node 84.5.3+, <5.057
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",

未完待续。。。

# webpack
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云开源项目Sermant正式成为CNCF官方项目

avatar 华为开发者空间

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间