问题:最开始想要学习一下vue-cli更换主题,然后就各种百度,最后说要使用sass,好家伙,就跟着百度的步骤一顿安装,结果,失败了,然后研究了两天,终于,终于解决了这个问题,激动得不知道跟谁分享所以记录下了这篇文章,希望能帮助到跟我相同问题的小伙伴,
报错:这个报错可能是因为无法下载,所以切换到cnmp下载;但是也可能是因为版本不匹配,可以切换安装版本,具体步骤如下。
问题1:下载的原因造成的问题
方法1、本地安装
第一步
如果之前安装了一遍失败了,记得执行卸载,没有则跳过卸载步骤。
卸载:
npm uninstall node-sass
下载地址:
https://github.com/sass/node-sass/releases
进入后下载 binding.node文件
第二步
执行如下代码,意思是告诉它不要去下载了,提取我本地下载的这个东西就行,=后面的就是你放置的位置。记住如果是windows一般的系统都是下载x64或者x86 ,而不是ia64,当然如果你就是需要ia86的话就下载ia86。根据自己的情况而定,不了解的可以去百度一下这两者的关系。
set SASS_BINARY_PATH=D:/xxp/project/win32-x64-64_binding.node
第三步
执行npm i node-sass -D --verbose
方法2切换淘宝镜像源安装
①安装cnpm,已安装的跳过。
npm install -g cnpm --registry=https://registry.npm.taobao.org
②如果之前安装了一遍失败了,安装前记得卸载之前的,没有则跳过卸载步骤
卸载:
npm uninstall node-sass
③执行安装
cnpm install node-sass
问题2:版本原因造成的问题
一定要记得考虑这个问题,最最重要的问题,我就是被这个问题困了两天,
记得看你的node版本和当前安装的版本是否匹配
。
查看node版本
注意: 很多情况都是 sass-loader和node-sass版本冲突
node -v
下面是我百度的各版本的
node-sass和node之间匹配
的结果。
下载对应的 版本可以解决大部分 node-sass和node版本冲突问题
因为我node的版本比较低,所以最后是这样的姿势安装成功的。
当然,老生常谈一遍,执行之前先安装cnpm 上面有步骤的。如果之前安装失败了记得卸载。
cnpm i node-sass@4.14.1 cnpm i sass-loader@7.3.1 --save-dev
报错信息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:
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/downloads
sass_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
npm uninstall sass-loader node-sass //卸载
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev //安装对应的版本
最后,还是失败了。
执行以下脚本:
npm uninstall sass-loader node-sass
npm install sass-loader@8.0.2 sass@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-service serve",
"build": "vue-cli-service build"
},
"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%",
"last 2 versions",
"not dead"
]
}