React安装node-sass失败解决方案分享

下面是关于“React安装node-sass失败解决方案分享”的完整攻略，包含了两条示例说明。

问题描述

在使用React项目中，当我们使用 npm install 安装依赖时，可能会遇到安装 node-sass 失败的问题，这个问题在Windows、Linux、MacOS等操作系统下都有可能出现。

解决方案

推荐两种解决方案。

方案一：使用cnpm

cnpm 是淘宝源镜像的npm，它可以替代npm，可以解决部分安装依赖出现的问题。

首先需要在全局安装cnpm，命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm安装node-sass，命令如下：

cnpm install node-sass --save-dev

这样，就可以通过使用cnpm安装node-sass来解决该问题。

方案二：使用npm的sass-binary

另外，我们也可以使用 npm 安装 sass-binary 模块来解决这个问题。

首先需要在全局安装sass-binary，命令如下：

npm install -g sass-binary --registry=https://registry.npm.taobao.org

npm rebuild node-sass

这样就可以使用npm的sass-binary来解决该问题。

示例说明

以下将分别对两种解决方案进行示例说明。

示例一：使用cnpm

我们以在Windows下创建一个React项目为例进行说明。

先创建一个React项目：

npx create-react-app test-app

然后进入项目目录，使用cnpm安装node-sass：

cd test-app
cnpm install node-sass --save-dev

如果安装成功，那么应该能够看到类似以下输出:

+ node-sass@4.14.1
+ sass-loader@10.2.0
added 221 packages from 115 contributors and audited 222 packages in 16.749s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

示例二：使用npm的sass-binary

我们以在Linux下创建一个React项目为例进行说明。

先创建一个React项目：

npx create-react-app test-app

然后进入项目目录，使用sass-binary重新构建node-sass：

cd test-app
npm install -g sass-binary --registry=https://registry.npm.taobao.org
npm rebuild node-sass

如果重新构建成功，那么应该能够看到类似以下输出:

> node-sass@4.14.1 install /path/to/test-app/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/user/.npm/node-sass/4.14.1/linux-x64-80_binding.node

> node-sass@4.14.1 postinstall /path/to/test-app/node_modules/node-sass
> node scripts/build.js

Binary found at /path/to/test-app/node_modules/node-sass/vendor/linux-x64-72/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test-app@0.1.0 No description
npm WARN test-app@0.1.0 No repository field.

added 3 packages from 3 contributors in 55.029s