怎么解決sass-loader和node-sass版本沖突的問題

這篇文章主要介紹“怎么解決sass-loader和node-sass版本沖突的問題”，在日常操作中，相信很多人在怎么解決sass-loader和node-sass版本沖突的問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么解決sass-loader和node-sass版本沖突的問題”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

報錯信息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

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

網上解決方法

去官方的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"
  ]
}

到此，關于“怎么解決sass-loader和node-sass版本沖突的問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！