Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.