npm报错Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.

---

一、问题描述

npm 编译报错：Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.

Syntax Error: Error: Node Sass version 7.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/@vue/cli-service/node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/drawer/Main.vue?vue&type=style&index=0&id=db8f5a52&scoped=true&lang=scss& 4:14-507
 @ ./src/components/drawer/Main.vue?vue&type=style&index=0&id=db8f5a52&scoped=true&lang=scss&
 @ ./src/components/drawer/Main.vue
 @ ./src/components/global.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.

二、解决方法

1.方法1

修改项目中的 package.json 文件，将 node-sass 版本改为与 ^4.0.0 一致的大版本，比如 ^4.14.1：

  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "compression-webpack-plugin": "^5.0.0",
    "node-sass": "^4.14.1",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "sass-loader": "^7.0.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.11"
  },

2.方法2

下载低版本的 node，然后安装对应版本的 node-sass，node-sass 的版本可在 package.json 文件中找到。执行以下命令：

npm install node-sass@版本号
npm rebuild node-sass@版本号
npm run dev