怎么解决sass-loader和node-sass版本冲突的问题
怎么解决sass-loader和node-sass版本冲突的问题
这篇文章主要介绍“怎么解决sass-loader和node-sass版本冲突的问题”，在日常操作中，相信很多人在怎么解决sass-loader和node-sass版本冲突的问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么解决sass-loader和node-sass版本冲突的问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
报错信息1
ERROR Failed to compile with 6 errors 7:45:21 PM
error in ./src/components/advanceDemo/toastCom.vue?vue&type=style&index=0&id=6f04d134&lang=scss&scoped=true&
Syntax Error: TypeError: this.getOptions is not a function
报错信息2
1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/goldwater/Documents/vue/vue3.0-demo/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (node:events:394:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.2.0
gyp ERR! command "/usr/local/bin/node" "/Users/goldwater/Documents/projectCode/project-learning-repository/vue/vue3.0-demo/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/goldwater/Documents/vue/vue3.0-demo/node_modules/node-sass
gyp ERR! node -v v16.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN vue-loader@16.4.1 requires a peer of @vue/compiler-sfc@^3.0.8 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! /Users/goldwater/.npm/_logs/2021-08-06T12_04_18_807Z-debug.log
解决办法
时代在发展，更新换代很快，作为一个前端小白在网上找了很多方法，最后还是请教一位老司机，解决了问题，下面说一下我解决的过程，让后人成功避开。
首先要先把上网环境解决了，在~/.npmrc添加以下镜像：
phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry=https://registry.npm.taobao.org
网上解决方法
去官方的github仓库去寻找合适的版本
node-sass: https://github.com/sass/node-sass/tags
sass-loader: https://github.com/webpack-contrib/sass-loader/tags
npmuninstallsass-loadernode-sass//卸载npminstallsass-loader@7.3.1node-sass@4.14.1--save-dev//安装对应的版本
最后，还是失败了。
我的解决方案
执行以下脚本：
npmuninstallsass-loadernode-sassnpminstallsass-loader@8.0.2sass@1.26.5--save-dev
不要安装node-sass，安装sass就可以了，package.json如下：
{"name":"vue3.0-demo-1","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild"},"dependencies":{"core-js":"^3.6.5","joi":"^17.4.2","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-service":"~4.5.0","eslint":"^7.32.0","eslint-plugin-vue":"^7.15.0",//这两个是重点：sass、sass-loader"sass":"^1.26.5","sass-loader":"^8.0.2","vue-template-compiler":"^2.6.11"},"browserslist":[">1%","last2versions","notdead"]}
到此，关于“怎么解决sass-loader和node-sass版本冲突的问题”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！
