sass-loader与node-sass版本兼容问题

vue安装 sass-loader@7.3.1：

安装成功，

vue安装 node-sass报错：

D:\keep\vue\vue-rent>npm install node-sass --save-dev
npm ERR! code 1
npm ERR! path D:\keep\vue\vue-rent\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@14.17.4 | win32 | x64
npm ERR! gyp info find Python using Python version 3.7.0 found at "D:\download\Python3.7.0\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\keep\vue\vue-rent\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack     at D:\keep\vue\vue-rent\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\keep\vue\vue-rent\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
npm ERR! gyp ERR! stack     at D:\keep\vue\vue-rent\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack     at D:\keep\vue\vue-rent\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack     at D:\keep\vue\vue-rent\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\keep\vue\vue-rent\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (child_process.js:397:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
npm ERR! gyp ERR! stack     at maybeClose (internal/child_process.js:1055:16)
npm ERR! gyp ERR! System Windows_NT 10.0.17134
npm ERR! gyp ERR! command "D:\\download\\node\\node\\node.exe" "D:\\keep\\vue\\vue-rent\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd D:\keep\vue\vue-rent\node_modules\node-sass
npm ERR! gyp ERR! node -v v14.17.4
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\59486\AppData\Local\npm-cache\_logs\2021-10-25T16_33_25_148Z-debug.log

---

cnpm如何设置/取消淘宝镜像和清除淘宝镜像

npm设置/删除淘宝镜像

---

解决方案：

解决办法：

使用淘宝镜像完成安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass

安装完成后node-sass版本是6.1.0

运行项目报错

 ERROR  Failed to compile with 1 error                                                                                                 上午11:25:31

 error  in ./src/views/chat/FriendChat.vue?vue&type=style&index=0&id=2f3948a3&lang=scss&scoped=true&

Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/
stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cach
e-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/chat/FriendChat.vue?vue&type=style&index=0&id=2f3948a3
&lang=scss&scoped=true& 4:14-483 15:3-20:5 16:22-491
 @ ./src/views/chat/FriendChat.vue?vue&type=style&index=0&id=2f3948a3&lang=scss&scoped=true&
 @ ./src/views/chat/FriendChat.vue
 @ ./src/views sync ^\.\/.*\.vue$
 @ ./src/utils/menus.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

node-sass和sass-loader的版本冲突问题

卸载旧版本的sass-loader：npm uninstall sass-loader
更改sass-loader的版本：npm install sass-loader@10.1.1 --save-dev

sass-loader@10.1.1安装成功

版本仍不兼容

sass-loader@10.1.1与@node-sass@6.1.0不兼容

Syntax Error: Error: PostCSS received undefined instead of CSS string

点击跳转，解决方法

node-sass和sass-loader的版本冲突问题

卸载旧版本的node-sass：npm uninstall node-sass
更改node-sass的版本：npm install node-sass@4.14.1 --save-dev

最后版本兼容，运行成功