How to solve the conflict between sass-loader and node-sass versions
This article mainly introduces "how to solve the conflict between sass-loader and node-sass versions". In daily operation, I believe many people have doubts about how to solve the conflict between sass-loader and node-sass versions. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "how to solve the conflict between sass-loader and node-sass versions". Next, please follow the editor to study!
Error message 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
Error message 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
Solution.
The times are developing and the generation is changing very fast. As a front-end rookie, I found a lot of methods on the Internet, and finally I consulted an old driver to solve the problem. Let's talk about my process of solving it, so that future generations can successfully avoid it.
First of all, to solve the Internet environment, add the following image in ~ / .npmrc:
Phantomjs_cdnurl= http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry=https://registry.npm.taobao.org online solution
Go to the official github warehouse to find the right version.
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 / / Uninstall npm install sass-loader@7.3.1 node-sass@4.14.1-- save-dev / / install the corresponding version
In the end, it failed.
My solution
Execute the following script:
Npm uninstall sass-loader node-sassnpm install sass-loader@8.0.2 sass@1.26.5-save-dev
Do not install node-sass, just install sass. The package.json is 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 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"]} so far The study on "how to resolve the conflict between sass-loader and node-sass versions" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
