It's so difficult. I haven't studied for two days. This problem was stuck for a long time and I almost gave up. I finally solved it today. Let's continue to study Vue!
Error message 1
ERROR Failed to compile with 6 errors 7:45:21 PM
error in ./src/components/advanceDemo/?vue&type=style&index=0&id=6f04d134&lang=scss&scoped=true&
Syntax Error: TypeError: is not a function
Error message 2
1 error generated.
make: *** [Release//binding/src/] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at (/Users/goldwater/Documents/vue/vue3.0-demo/node_modules/node-gyp/lib/:262:23)
gyp ERR! stack at (node:events:394:28)
gyp ERR! stack at ._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/" "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/`
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
Solution
The times are developing and the updates are very fast. As a front-end novice, I have found many methods online. Finally, I would like to ask an old driver to solve the problem. Let me talk about my solution process.Let future generations avoid it successfully。
First of all, we need to solve the Internet environment first, and add the following image in ~/.npmrc:
phantomjs_cdnurl=/downloads sass_binary_site=/mirrors/node-sass/ registry=
Online solution
Go to the official github repository to find the right version
node-sass: /sass/node-sass/tags
sass-loader: /webpack-contrib/sass-loader/tags
npm uninstall sass-loader node-sass //uninstallnpm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev //Installing the corresponding version
In the end, it still failed.
My solution
Execute the following script:
npm uninstall sass-loader node-sass npm install sass-loader@8.0.2 sass@1.26.5 --save-dev
Don't install node-sass, just install sass, as follows:
{
"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",
// These two are the key points: 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"
]
}
The above is personal experience. I hope you can give you a reference and I hope you can support me more.