点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

前言

我相信 90% 的前端工具人都遇到过 node-sass的问题。项目死活跑不起来，或者跑起来后直接报错、node-sass 安装阶段各种报错，安装不上等问题。 第一次遇到这个问题时肯定非常抓狂，气得吐血。 那这是为什么呢？

node-sass是通过编译Sass文件生成CSS文件的重要工具，它允许开发者使用Sass语法编写更简洁、易于维护的样式代码。

由于node-sass是基于node.js的，它「依赖于特定版本的Node.js来运行」。如果node-sass与Node.js的版本不匹配，就会导致编译错误、性能等其他奇奇怪怪的问题。 所以要解决项目中有 node-sass 依赖想正常稳定的运行起来，首先需要了解并正确选择 node-sass与Node.js的版本。

所以 node-sass 与 Node.js 「版本对应关系非常重要！！！」

项目依赖信息

下面是一个项目中package.json内容

"dependencies": {
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "echarts": "^4.9.0",
    "echarts-gl": "^1.1.1",
    "echarts-wordcloud": "^1.1.3",
    "element-ui": "^2.13.2",
    "file-saver": "^2.0.5",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "less": "^3.12.2",
    "less-loader": "^7.0.2",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-cron": "^1.0.9",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1",
    "xlsx": "^0.17.5"
  },
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.0.3"
  },

可以看到有node-sass、sass-loader依赖

• "node-sass": "^4.12.0",

• "sass-loader": "^7.0.1"

node 和 node-sass 对应版本

NodeJS	node-sass version	Node Module
Node 20	9.0+	115
Node 19	8.0+	111
Node 18	8.0+	108
Node 17	7.0+, <8.0	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+, <9.0	83
Node 13	4.13+, <5.0	79
Node 12	4.12+, <8.0	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

node-sass npm地址：

https://www.npmjs.com/package/node-sass

node.js版本

node 官网：

https://nodejs.org/zh-cn/about/previous-releases

常用匹配的 node-sass 和 sass-loader

• 常用匹配版本

node-sass	sass-loader
4.3.0	4.1.1
4.7.2	7.0.3
4.7.2	7.3.1
4.12.0	7.0.1
4.14.1	8.0.0
4.14.1	7.3.1
6.0.1	10.0.1

解决方案1 (切换node)

❝

根据上述版本对应表，安装指定node版本去尝试运行当前项目，而不修改 node-sass、sass-loader版本。 我是使用 nvm 管理的node版本。

❞

可以看到上述我的这个项目中 node-sass 版本是 4.12.0， 那对应的 node 版本 就应该是 node 12，所以我们就去安装node的12版本：

nvm 安装： nvm install 12.22.12

切换指定版本：nvm use 12.22.12 （注意这种方式切换时只是临时切换，重新打开终端时 node 版本就会恢复到默认版本）

如果需要切换默认版本： nvm alias default v12.22.12

ls  查看

cnpm 安装报错

安装好对应 node 版本后我们直接去下载依赖，但是使用 cnpm i 直接报错了：Error: Cannot find module 'fs/promises'

原因：这是因为 Node.js版本太低导致的（也可以说是cnpm版本太高），由于低版本的Node.js对于promises的引入方式与高版本不一样，而cnpm版本太高的话，Node是不支持'fs/promises'引入方式的。

解决方案下面再说，我们先看遇到的情况

npm 安装报错

cnpm 直接报错，那我就直接使用 npm 安装

可以看到虽然有一些报错，但是我们先直接启动项目看看：

发现项目中引入 .scss 文件直接报错了！

ValueError: invalid mode: 'rU' while trying to load binding.gyp

仔细查看 npm 安装报错: ValueError: invalid mode: 'rU' while trying to load binding.gyp

先不管他，直接在尝试使用 cnpm i

咦，感觉好像成功了，直接 npm run serve  启动项目看看，发现成功，没有任何报错，太激动了！

这是为什么呢？ 原来是因为我第二次 cnpm i 是新开的终端环境下执行的， node 是 16.x  所以就没有上面第一次 cnpm 直接报错的情况，所以下载成功

cnpmi直接报错：


Error: Cannot find module 'fs/promises'

「解决方案」：

• 1、升级Node.js版本：

清理npm缓存：npm cache clean -f升级到最新的版 node， 但是当前情况这个方法肯定不适用，我是打算要 「使用低版本的 node 去运行项目的」！

• 2、降低cnpm的版本：

删除已安装的cnpm版本：npm uninstall -g cnpm

安装低版本cnpm：npm install cnpm@7.1.0 -g --registry=https://registry.npmmirror.com

解决方案 2（修改依赖版本）

❝

node -v 查看当前 node 版本，然后查看项目中 package.json 中 node-sass和sass-loader是否对应node版本，如果不对应，那就修改依赖版本，让其匹配。 这种方法在多人协作开发时不推荐！！！

❞

• 安装对应你当前 node版本的 node-sass、sass-loader 版本，然后尝试启动

npm install node-sass@版本号 sass-loader@版本号 --save-dev

or

cnpm install sass-loader@版本号 node-sass@版本号 --save-dev

解决方案3（直接替换 node-sass）

❝

直接删除 node-sass 换成 sass。我这里安装的是："sass": "^1.60.0"版本。这种方法多人协作也不太推荐，如果对项目中其他内容没啥影响，可以协商是否替换。

❞

cnpm i sass@1.60.0 -D

依赖如下：

"sass": "^1.60.0",
"sass-loader": "^7.0.1"

换成sass启动后报错问题

换成 sass 后，虽然项目是跑起来了，但是项目里之前 lang=sass 的样式代码会报错，阻止了服务进程。

如：

• sass  内容不可以使用分号 ;

• css代码缩进问题

解决方法：

• 要么换成 lang=scss，加括号 {}

• 要么挨个删除 分号;

这两种方法都很难受，涉及到的文件多的话要一个个的改。 还好可以使用 vscode 的格式化 Vetur 进行去除代码末尾分号。

因为这是个老项目，所以代码不统一，之前 sass、现在又是 less，所以项目的统一性还是很重要的！

打包报错

npm run build 打包直接报错了

原因： 当前终端下的 node 环境不是我们上面需要的 12 版本，所以需要先切换 node12 版本后重新打包即可。

其他情况注意

使用npm 下载过程中, 如果对应的文件 npm镜像源没有的话, 则需要换回原版镜像源, 然后开代理去下载。

需要使用 c++、python 环境情况

• 下面这个依赖需要c++开发环境

还可能需要安装： visual studio2022 才可以运行

这个依赖如果网上有人提前编译好的, 就选择从网上下载编译好的。 如果没有，就可能需要要自己本地编译。

参考文章

invalid mode: ‘rU‘ while trying to load binding.gyp 解决 node-gyp 与 python 版本不匹配报错

总结

至此，本文主要记录了如何稳定运行 node-sass依赖的项目。主要是要注意 node、node-sass 版本对应关系，如果遇到项目有 node-sass 跑不起来的情况，不要心急，看清楚版本、当前终端环境等细节后，进行尝试解决。

往期推荐

ES15 中最具变革性的 5 个 JavaScript 特性

前端异常隔离：Proxy、Web Workers 与 iframe 的深度对比

使用这个新的 ECMAScript 运算符告别 Try/Catch！

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧