sass node-sass sass loader

太难了，两天没有学习了，这个问题卡了很久，差点就放弃了，今天终于解决了，继续学习Vue！

报错信息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
1
2
3
4
5
报错信息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/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
1
2
3
网上解决方法：
去官方的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 //安装对应的版本
1
2
最后，还是失败了。

我的解决方案：
执行以下脚本：

npm uninstall sass-loader node-sass
npm install sass-loader@8.0.2 sass@1.26.5 --save-dev
1
2
不要安装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”
]
}

sass node-sass sass loader相关推荐

HbuilderX Node插件[sass]安装失败，可在命令行中使用'npm install'命令进行重新安装
如图所示: 解决办法在HBuilderX目录下,进入plugins .compile-node-sass目录,打开终端,手动执行npm install 原文链接
Sass函数：Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
vs code使用Easy Sass插件编译sass文件路径报错问题解决
问题: scss文件中使用了@import来引入另一个scss文件,两个scss文件不在同一层级,所以我使用相对路径的写法来引用文件,但是使用vs code里面安装的扩展Easy Sass进行编译时, ...
sass教程之--sass的安装
Sass 安装本章节我们主要介绍 Sass 的安装与使用. NPM 安装我们可以使用 npm(NPM 使用介绍)来安装 Sass. npm install -g sass 注:国内 npm 建议使 ...
sass教程之--sass变量
Sass 变量变量用于存储一些信息,它可以重复使用. Sass 变量可以存储以下信息: 字符串数字颜色值布尔值列表 null 值 Sass 变量使用 $ 符号: $variablename: ...
下载Node.js和Node.js软件+Sass结合学习代码
一.Sass是什么? 产生原因:在学习Sass之前,首先了解一下原生CSS语言,CSS仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用.CSS主要有以下缺点. CSS是一门非程序式 ...
《AngularJS深度剖析与最佳实践》一1.3　创建项目
本节书摘来自华章出版社<AngularJS深度剖析与最佳实践>一书中的第1章,第1.3节,作者雪狼破狼彭洪伟,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
css 样式三元运算_CSS扩展语言——Sass入门指南
一.Sass概况今天来聊聊sass吧,之前用了很久的less,刚开始接触的时候感觉这东西就是个神器. 写CSS时间长了自然就能发现CSS在书写的时候的不足之处,不能嵌套,没有变量,更加不能像js那样 ...

sass node-sass sass loader

sass node-sass sass loader相关推荐

最新文章

热门文章